CSS Spinner / Loader Generator
NewPick from several pure-CSS loading spinner styles (ring, dots, pulse, bars), customize size/color/speed, and copy ready-to-use HTML + CSS — no images or JS libraries.
Frequently Asked Questions
Do these spinners require any JavaScript to animate?
No — every spinner style uses pure CSS @keyframes animations applied to plain HTML elements, so once you copy the HTML and CSS, it animates on its own with no JavaScript dependency.
What do the Size, Color, and Speed controls affect?
Size scales every dimension of the spinner (border thickness, dot size, bar height, etc.) proportionally, Color sets the main animated color, and Speed sets the duration of one full animation cycle in seconds — all three regenerate the copyable CSS live.
Can I use these spinners with a transparent or dark background?
Yes — none of the four styles rely on a background color of their own (the ring style even uses a translucent version of your chosen color for its non-active border segment), so they work over light or dark backgrounds without extra changes.
Why do the class names in the generated CSS start with "wdtb-"?
It's a namespace prefix to avoid collisions with your own existing CSS class names when you paste the generated styles into a real project — feel free to rename them once copied.
Will the animation respect a user's reduced-motion preference?
Not by default — the generated CSS is a plain @keyframes animation, so if you need to respect prefers-reduced-motion, wrap the animation rule in an `@media (prefers-reduced-motion: no-preference)` query after copying it into your project.