How it works
- 1
Pick a spinner style
Browse 10 animation styles — Ring, Dots, Wave Bars, Dual Ring, Pulse, Ripple, Fade, Orbit, Tail, and Flip — in the gallery and click to select.
- 2
Customize it
Adjust color, animation speed, size, and stroke weight using the live controls. The preview updates in real time so you see exactly what you'll get.
- 3
Copy the CSS or React code
Export as plain CSS with HTML markup (works in any project) or as a self-contained React component with the animation injected via a style tag.
Choose a spinner style
🛡️ Verify zero uploads — open DevTools → Network tab
Open your browser's DevTools (F12), go to the Network tab, and use this tool. You will see zero outbound requests — all processing runs inside your browser sandbox via WebAssembly or pure JavaScript. Nothing you paste or upload is ever sent anywhere.
Use cases
Button loading states
Drop a small spinner (16–24px) next to a submit button label to indicate in-progress form submission without disabling the entire UI.
Page and section skeletons
Use a centered medium-sized spinner (40–64px) while async data loads in a card or page section before skeleton screens kick in.
Design system components
Export the React component, rename the class prefix, and drop it directly into your component library — no third-party dependency needed.
Frequently Asked Questions
Does the generated spinner need any CSS framework or library?
No. Both the CSS and React exports are dependency-free. The CSS uses only standard @keyframes animations and transforms, compatible with all modern browsers (Chrome, Firefox, Safari, Edge).
Will the spinner respect prefers-reduced-motion?
Yes. Every exported spinner includes an @media (prefers-reduced-motion: reduce) block that sets the animation-duration to near-zero and limits iteration to one, so users who prefer reduced motion get a nearly-static spinner.
How do I use the CSS export in my project?
The CSS tab exports both the HTML markup (in a comment block) and the CSS. Add the CSS to your stylesheet, then place the HTML where you want the spinner. For dynamic show/hide, toggle visibility or display with JavaScript or your framework.
What does the React export look like?
A self-contained functional component that renders a <style> tag with the @keyframes CSS alongside the spinner element. No external CSS file needed — just import and use the component. You can rename the CSS class prefix to avoid naming conflicts.
Can I animate the color change too?
The current exports use a single solid color. To animate a color transition, add an additional @keyframes rule that transitions the border-color or background-color property alongside the rotation animation.
Want unlimited access + saved history?
Pro is $9/month · 30-day money-back guarantee.