Loaders
Dots Scale
Trio of dots that scale up and down sequentially.
Installation
Add the keyframe
Add the keyframe to the keyframes object in your tailwind.config.js file.
import type { Config } from 'tailwindcss';
const config: Config = {
// ...
theme: {
// ...
extend: {
// ...
keyframes: {
pulse2: {
'0%': { transform: 'scale(0)' },
'50%': { transform: 'scale(1)' },
'100%': { transform: 'scale(0)' },
},
},
},
},
};
export default config;Add the animation
Add the animation to the animation object in your tailwind.config.js file.
import type { Config } from 'tailwindcss';
const config: Config = {
// ...
theme: {
// ...
extend: {
// ...
animation: {
pulse2: 'pulse2 1.3s ease-in-out infinite',
},
},
},
};
export default config;