CSS Loader and Spinner Generator

Make a pure CSS loading spinner, dots, bars, or pulse animation in your brand color. Copy the HTML and CSS; no images, no JavaScript, and reduced motion is respected.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS
HTML

How to use the CSS Loader Generator

  1. Pick a Style: Spinner, Dots, Bars, or Pulse.
  2. Set the Size, Color, Duration, and for the spinner the Ring thickness.
  3. Copy the HTML and the CSS into your page.

How it works

  • Each loader is one element (plus a few spans for dots and bars) animated with CSS @keyframes, so it keeps moving even while JavaScript is busy.
  • The spinner is a circle with a faint border and one colored side, rotated 360° per cycle.
  • Dots and bars reuse one animation with staggered animation-delay values.
  • The HTML has role="status" and aria-label="Loading" so screen readers announce it.
  • A prefers-reduced-motion block slows the animation and stops it after three cycles for people who turn off motion.

Examples

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(240, 185, 11, 0.2);
  border-top-color: #f0b90b;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

Limitations

  • The animations use transform and opacity only, which are cheap, but many loaders running at once still cost battery.
  • Show a loader only when a wait is noticeable (about a second). For long waits, a progress bar tells people more.

Frequently asked questions

Why use a CSS loader instead of a GIF?

CSS loaders are tiny, sharp at any size, easy to recolor, and keep animating smoothly because they run on the compositor.

Are CSS spinners accessible?

They are when the element has role="status" and a label, and when motion is reduced for people who ask for it. The generated code does both.

How do I hide the loader when loading finishes?

Remove the element or add the hidden attribute from your JavaScript once the content is ready.

Is anything uploaded?

No. The code is built in your browser.

Often used together with the CSS Loader Generator.