BYTETOOLS

CSS Loader Generator

Generate pure-CSS loading spinners: ring, dots and bars. Control size, color and speed, preview the animation live, and copy the CSS including keyframes.

Loader settings

48
1000

CSS

.loader {
  width: 48px;
  height: 48px;
  border: 6px solid rgba(0, 0, 0, 0.12);
  border-top-color: #6d28d9;
  border-radius: 50%;
  animation: loader-spin 1000ms linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

HTML: <div class="loader"></div>

What is the CSS Loader Generator?

The CSS Loader Generator creates lightweight, dependency-free loading indicators. Choose a preset — a spinning ring, bouncing dots or animated bars — then set the size, color and speed, and watch it animate live.

  • Three loader styles: ring, dots, bars
  • Size, color and speed controls
  • Live animated preview
  • Pure CSS with keyframes — no images
  • Copy-ready loader CSS
  • 100% client-side and free

How to use the CSS Loader Generator

  1. 1

    Pick a loader style: ring, dots or bars.

  2. 2

    Set the size, color and animation speed.

  3. 3

    Watch the live spinner animate with your settings.

  4. 4

    Copy the CSS, including the keyframes, into your project.

About the CSS Loader Generator

The CSS Loader Generator creates lightweight, dependency-free loading indicators. Choose a preset — a spinning ring, bouncing dots or animated bars — then set the size, color and speed, and watch it animate live. The output includes the element markup styles and the @keyframes rule.

These loaders are ideal for buttons, page transitions and data-fetch states where you want smooth feedback without shipping an animation library or GIF. Everything is drawn with CSS, so it stays crisp at any resolution.

All code is generated locally in your browser — free, private and offline-capable.

Frequently asked questions

How do you make a loading spinner in CSS?

The classic ring spinner is a circular element with a transparent border on most sides and one colored side, rotated infinitely with a @keyframes rule that animates transform: rotate(360deg). This tool generates that plus dot and bar variants.

Are CSS spinners better than GIF loaders?

Usually yes. CSS spinners are tiny, stay sharp on any screen, respect the current text color, and need no network request or decoding. GIFs have fixed resolution, larger file sizes and can look dated.

How do I change the speed of a CSS loader?

Adjust the animation-duration — a shorter duration spins faster. This tool exposes a speed control that maps to the duration, and the copied keyframes reflect your chosen value.

How do I center a loading spinner on the page?

Wrap it in a flex container with justify-content: center and align-items: center, or use absolute positioning with inset: 0 and margin: auto. The generated loader works inside any centering layout.

Do CSS loaders respect reduced-motion preferences?

By default they always animate, so for accessibility you can wrap the animation in a @media (prefers-reduced-motion: no-preference) query or provide a static fallback for users who prefer less motion.

Guides for CSS Loader Generator

Related tools