Loaders

Waveform

Rythmic loader lines that rise and fall.

Installation

Add the keyframe

Add the keyframe to the keyframes object in your tailwind.config.js file.

tailwind.config.ts
import type { Config } from 'tailwindcss';
 
const config: Config = {
  // ...
  theme: {
    // ...
    extend: {
      // ...
      keyframes: {

        grow: {
          '0%': { transform: 'scaleY(0.3)' },
          '50%': { transform: 'scaleY(1)' },
          '100%': { transform: 'scaleY(0.3)' },
        },
      },
    },
  },
};
 
export default config;

On this page