CSS loader generator — accessible spinners, dots and progress bars

How to use the CSS loader generator

1. Pick a Loader: Spinner ring, Dual ring, Bouncing dots, Bars, Pulse, Ripple, Indeterminate bar or Orbit.
2. Set the Size from 16 to 160 px.
3. Choose a Colour and a Cycle time between 0.3 and 4 seconds.
4. Copy both outputs: the CSS into your stylesheet and the HTML where the loader should appear.

What it does and when to use it

A loading indicator tells people the page has not frozen. This tool gives you a small, self-contained one: a .loader element, its keyframes, and a .visually-hidden helper class. Use it while a search runs, a form submits or a chart fetches data.

To change the speed curve of a loader, design one in the cubic-bezier editor. For other looping motion such as a pulsing badge, use the CSS animation generator, and if you prefer an SVG spinner, try the SVG spinner generator.

How it works

Each style is built from borders, small circles or bars:

• Ring and dual ring spin one element with coloured top (and bottom) borders. The border thickness is one eighth of the size, at least 2 px.
• Dots and bars animate child spans with staggered delays so they move in a wave.
• Pulse and ripple grow circles from nothing while fading them out.
• Indeterminate bar slides a 40% segment across a track four times as wide as the size.
• Orbit rotates two dots on opposite sides of a circle.

The ring and the indeterminate bar draw their faint track with color-mix(in srgb, <colour> 20%, transparent). MDN lists color-mix() as Baseline widely available since May 2023 and @keyframes since September 2015.

Worked examples

Default spinner ring, 48 px, #4f46e5, 1 s:

.loader {
  width: 48px; height: 48px;
  border: 6px solid color-mix(in srgb, #4f46e5 20%, transparent);
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

Bars at 1.2 s. The four bars start 0.12 s apart, ending with .loader span:nth-child(4) { animation-delay: 0.36s; }.

A slim page-top bar. Indeterminate bar at size 32 gives width: 128px; height: 4px;. Set the width to 100% in your CSS to span the page.

Limits and tips

• The class names are fixed (.loader, .visually-hidden, loader-spin and so on). Rename them if they clash with your stylesheet.
• Show the loader only after a short pause. A spinner that flashes for a split second on fast responses looks like a glitch.
• Do not leave it spinning on errors. Replace it with a message that explains what went wrong.