Skip to content
Lizely

CSS Loader Generator

Generate a lightweight CSS ring spinner with bounded size, width, colors, and duration plus accessible implementation guidance.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose the spinner size and ring width.
  2. 2.Set contrasting active and track colors.
  3. 3.Adjust duration while watching the live rotation.
  4. 4.Copy the CSS, then add status text, reduced-motion rules, and real loading state logic.

About CSS Loader Generator

CSS Loader Generator builds a compact ring spinner from standard borders and a keyframe rotation. Set the overall size, ring width, active color, track color, and animation duration. The preview is a real status element using the same dimensions, border, color, and timing values produced in the copied CSS. The output includes a .loader class and a uniquely named @keyframes rule, giving you a complete baseline that can be pasted into a stylesheet without an image, SVG file, JavaScript animation loop, or third-party package.

The visual technique is deliberately simple. Equal width and height create a square box. A circular border-radius turns that box into a ring. The full border uses the track color, while border-top-color replaces one segment with the active color. A keyframe rotates the element through three hundred sixty degrees, and the animation shorthand applies the selected duration, linear timing, and infinite repetition. Because the geometry is CSS rather than a raster asset, it remains sharp at different pixel densities.

Input bounds protect the preview from unusable values. Size is limited from twelve through one hundred sixty pixels. Ring width must be at least one pixel and cannot exceed half the selected size, otherwise the inner opening collapses. Duration accepts 0.2 through 5 seconds; very fast movement can be uncomfortable and very slow movement may look frozen. Colors must be six-digit hexadecimal values. Empty numeric fields become invalid instead of silently turning into zero, and non-finite values are rejected.

A loading animation is only visual feedback. The production element needs an accessible name or nearby status text that explains what is happening. The preview uses role=status and an aria-label, but your implementation should match the actual task, such as Loading results or Uploading file. Do not announce rapid minor updates repeatedly. If progress can be measured, a progress bar with a value is often more informative than an indeterminate spinner. Never use animation to hide an operation that has failed or stalled; expose timeouts, cancellation, retry, and error states.

Continuous rotation should respect reduced-motion preferences. The copied baseline is intentionally straightforward, so add an @media (prefers-reduced-motion: reduce) rule that slows or replaces the animation according to your product's accessibility policy. Also test high contrast, forced colors, dark themes, zoom, and small screens. Track and active colors need enough distinction, but the spinner should not be the only way users learn that content is loading. Reserve layout space so the result does not cause a shift when it appears or disappears.

Animation performance is generally good because transform rotation can be composited efficiently, but many simultaneous spinners still create visual noise and consume resources. Render only where feedback is needed and remove the loader promptly when the operation finishes. The generator does not add JavaScript state management, overlay positioning, modal behavior, skeleton content, or progress calculation. Those decisions belong to the surrounding application. Rename the class or keyframes if your stylesheet already uses the same identifiers.

All work happens locally in the browser. Settings are not uploaded or retained, no account is needed, and no new dependency is introduced. Use the preview to establish scale and timing, copy the CSS, then add meaningful status text, reduced-motion behavior, failure handling, and lifecycle logic. Test the loader with actual network delay rather than only a permanent demo animation, and confirm it disappears reliably after success, cancellation, or error.

Methodology & sources

Validates bounded finite size, ring width, duration, and hex colors; serializes a circular border with a distinct top segment; and generates a linear infinite transform keyframe used by the live preview.

Frequently asked questions

Is the generated spinner accessible by itself?
No. Add a meaningful accessible name or nearby status text, and use measured progress when it is available.
How should reduced motion be handled?
Add a prefers-reduced-motion rule that slows, simplifies, or replaces continuous rotation according to your product policy.
Why is ring width limited to half the size?
A thicker border would collapse or invert the visible inner opening and no longer behave like a clear ring.

Related tools

Developer Tools guides

View all