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 $6/month · 30-day money-back guarantee.
Embed or share this toollink · markdown · html · iframe
https://aarunyaapps.com/spinner-generator
Related Tools
From the blog
CSS Loading Spinners: Stop Using a Library for a 10-Line Animation
Every major UI framework ships a spinner that pulls in 40 KB of JavaScript for a rotating circle. This guide shows how to build 5 different CSS loading animations from scratch — border spinners, dots, bars — with zero dependencies.
6 min read
Regex for Beginners: 10 Patterns Every Developer Should Know
Practical regular expressions explained in plain English — email validation, URL matching, phone numbers, ISO dates, and more. Includes live examples for JavaScript, Python, and Go.
10 min read
Why Your Email Signature Looks Broken in Outlook (and How to Fix It)
Outlook renders HTML email differently from every other client. This guide explains the 5 most common signature rendering bugs — missing images, broken layout, stripped CSS — and gives copy-paste fixes for each.
7 min read