Overview
A generator for four pure-CSS loading indicators: a rotating ring, three bouncing dots, four stretching bars and a pulsing disc. Size, color and speed are shared controls, and the output ships the matching HTML snippet plus a style block containing the keyframes, so the copy is self-contained and works pasted into any page.
How It Works
Choose the variant: ring, dots, bars or pulse. Set the color, drag size from 16 to 80 pixels, and set the animation period from 0.4 to 3 seconds. The preview runs the loader live. The output box contains both the HTML, for example a single div for the ring or three spans for the dots, and a style tag with the loader class and its @keyframes. Copy the whole block and paste it where the loader should appear.
Step-by-Step Usage Guide
- Pick the ring, dots, bars or pulse variant.
- Set color, size and animation speed.
- Watch the live preview to tune the feel.
- Copy the combined HTML and CSS block.
Technical Specifications & Standards
The ring is a bordered circle whose border-top-color differs from the other three sides; rotating that shape produces the classic spinner, with the border width derived as the larger of 3 pixels and one eighth of the size. Dots stagger with 0.15 second delays and bars with 0.1 second delays, all sharing one keyframe timeline per variant. The performance split matters when you scale these up: ring, dots and pulse animate transform and opacity, which browsers composite without touching layout, while bars animate height between 30 and 100 percent, a layout property that reflows the container every frame. For busy pages prefer the transform-based variants, or rewrite the bars with scaleY. Each snippet hardcodes its own keyframe names, so multiple loaders on one page share the definitions harmlessly.
Targeted Use Cases
- Inline spinners next to buttons during form submission.
- Full-center loading placeholders for slow data panels.
- Skeleton-adjacent indicators before content streams in.
- Lightweight alternatives to animated GIF or Lottie loaders.
Notes & Gotchas
- Prefer the ring, dots or pulse variants; they animate compositor-friendly properties only.
- Keep periods between 0.6 and 1.5 seconds so progress reads as ongoing rather than frantic.
- Add a visually-hidden text label like Loading for screen readers, since a spinner alone is silent.
- Reuse one loader style across the app; mixed spinner styles read as different states.
Frequently Asked Questions
Do the loaders need JavaScript?
None. Each variant is a small HTML fragment plus CSS keyframes, so they run with scripting disabled and cost nothing to initialize.
Which variant performs best?
Ring, dots and pulse animate transform and opacity, which the compositor handles without layout. Bars animate height, forcing layout each frame, so on large pages prefer the others or convert bars to scaleY transforms.
How is the ring border thickness chosen?
It is the larger of 3 pixels and one eighth of the chosen size, so the ring stays proportional as you scale from 16 to 80 pixels.
Can I put several different loaders on one page?
Yes. Every variant names its keyframes distinctly, spin, bounce, stretch and pulse, so the definitions coexist; copying two variants includes both keyframe blocks once each.