Ten hand-authored loader animations with size / speed / color controls. Copy CSS + JSX in one click.
Size + speed
Size
48pxSpeed
1200msColor
CSS
.loader {
width: var(--loader-size);
height: var(--loader-size);
border: calc(var(--loader-size) / 8) solid color-mix(in srgb, var(--loader-color) 25%, transparent);
border-top-color: var(--loader-color);
border-radius: 50%;
animation: loader-spin var(--loader-speed) linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }JSX
<div className="loader" role="status" aria-label="Loading" />
Pick a loader
Ten styles: spinner, dots, bars, pulse, shimmer, segmented arc, and more.
Dial size + speed
Size in pixels, speed as animation duration. Preview runs live.
Pick a color
Full Tailwind palette. The loader renders with your brand color instantly.
Copy
CSS @keyframes, ready-to-paste markup, and a JSX snippet for React.
Yes — the snippet uses standard CSS custom properties, which Tailwind v4 consumes natively via @theme. The color you pick is emitted as a hex value, so it works in any CSS setup.
Not for these loaders — they rely on @keyframes that Tailwind utilities can't express. Copy the CSS into your stylesheet once and reference the class from JSX.
Yes. Every loader animates only transform and opacity, which compositor-accelerates on modern browsers. No layout thrash, no paint cost per frame.
Box shadow
Multi-layer CSS box-shadow editor with Tailwind color picker and preset stacks.
Cubic bezier
Design a CSS easing curve with draggable handles — with preset eases and copy-ready outputs.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal