A spinner without the baggage
You don’t need a GIF for this. You don’t need a 40KB animation library either. A loading spinner is one element and a handful of CSS rules, and that’s exactly what this generator spits out.
Pick one of five styles, drag the sliders until the size and tempo feel right, set the color to match your brand, and copy the result. What you paste is plain CSS plus the @keyframes block that drives it. No scripts. No network request for an image asset. Just markup that animates itself.
The five styles, and when each one fits
Spinning ring is the workhorse. One circle, one open edge, rotating forever. It’s the spinner people read as “loading” without a caption. Reach for it on buttons and full-page overlays.
Dual ring spins two arcs that chase each other. Slightly busier, slightly more “premium” feeling. Good for dashboards where a plain ring looks too plain.
Bouncing dots are three dots rising and falling in sequence. They read as “thinking” more than “loading,” which is why chat apps and AI tools lean on them. Honestly, they’re the friendliest of the bunch.
Pulsing circle is a single dot that expands and fades out, like a ripple on water. Quiet, minimal, easy to miss on purpose. Nice for background fetches you don’t want to shout about.
Spinning bars are five vertical bars that stretch up and down in a wave. The audio-equalizer look. Works well centered in a card while content streams in.
Dropping it into your page
Two of the styles are a single element. Two need a few child spans (the dots and the bars). The generator drops a markup comment right in the CSS so you’re never guessing which is which.
For the ring or the pulse, it’s just:
<div class="loader"></div>For dots or bars, you add the children the comment shows you:
<div class="loader"><span></span><span></span><span></span></div>Rename .loader to whatever fits your codebase. If you’ve already got a .loader class doing something else, swap it and you’re fine. The keyframe names are scoped with a loader- prefix so they won’t stomp on existing animations.
Knobs worth knowing about
Size runs from 16px to 120px. The border thickness, dot diameter, and bar width all scale off that number, so a 16px ring stays proportional and doesn’t turn into a thin wobbly hoop.
Speed is the full animation duration in seconds, from a snappy 0.3s to a lazy 3s. Most interface spinners sit between 0.6s and 1.2s. Go much slower and people wonder if it froze. Go much faster and it reads as frantic.
Color feeds both the picker and a text field, so you can eyedrop a shade or paste a hex straight from your design tokens. The ring styles use that color at full strength on the moving part and a faint version underneath for the track.
One accessibility note
Some people get motion sick or distracted by looping animation, and browsers expose that as a prefers-reduced-motion setting. Respect it. The cleanest fix is to slow the spin way down or freeze it for those users:
@media (prefers-reduced-motion: reduce) {
.loader { animation-duration: 4s; }
}A near-frozen spinner still signals “working” without the spin that triggers discomfort. It’s two lines, and it’s the right thing to ship.
Questions people ask
Will this work without any JavaScript?
Yep. It’s CSS animation start to finish. Drop the markup in, include the CSS, and it spins on its own with zero scripts.
How do I stop it once my content loads?
Remove the element from the DOM, or toggle a class that sets display: none. The animation only runs while the element is on the page.
Can I use this in React, Vue, or Svelte?
Sure. Paste the CSS into your stylesheet or a styled component and render the same markup as a <Loader />. Nothing here is framework-specific.
Why a loader- prefix on the keyframes?
So the copied snippet won’t collide with @keyframes spin or anything else already defined on your page. Rename them if you’d rather, just keep the names matching between the rule and the @keyframes.
Does the spinner color support gradients?
The picker outputs a solid hex. For a gradient ring you’d swap the border-top-color approach for a conic-gradient background with a mask, which is a different recipe. Solid colors cover most real use cases.