epic-loading-animations
Version:
Spinners and Transitions to use in React apps
41 lines (39 loc) • 1.57 kB
text/typescript
import type { Config } from "tailwindcss";
export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
animation: {
rotate45Camp: "rotate45Camp 4s ease-in-out infinite",
rotateZ: "rotateZ 4s linear infinite",
},
keyframes: {
rotate45Camp: {
"0%": { transform: "rotate(0deg)", borderBottomRightRadius: "0.5rem" },
"12.5%": { transform: "rotate(45deg)", borderBottomRightRadius: "100%" },
"25%": { transform: "rotate(90deg)", borderBottomRightRadius: "0.5rem", borderTopRightRadius: "0.5rem" },
"37.5%": { transform: "rotate(135deg)", borderTopRightRadius: "100%" },
"50%": { transform: "rotate(180deg)", borderTopRightRadius: "0.5rem", borderTopLeftRadius: "0.5rem" },
"62.5%": { transform: "rotate(225deg)", borderTopLeftRadius: "100%" },
"75%": { transform: "rotate(270deg)", borderTopLeftRadius: "0.5rem", borderBottomLeftRadius: "0.5rem" },
"87.5%": { transform: "rotate(315deg)", borderBottomLeftRadius: "100%" },
"100%": { transform: "rotate(360deg)", borderBottomLeftRadius: "0.5rem" },
},
rotateZ: {
"0%": { height: "4rem"},
"50%": { height: "0rem"},
"100%": { height: "4rem"},
}
},
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;