CSS Loader Generator

How do you generate a working CSS loader?

Choose Standalone under Usage preset and select Spinner. Keep the initial Size of 48px, Speed of 1.2s and Border width of 4px. With Primary color #6366f1 and Secondary color #e0e7ff, the generated spinner has a pale track and a purple top border. Copy CSS and Copy HTML provide the matching animation and markup.

For a concrete variation, enter checkout- in Class and keyframe prefix and choose Slow down under Reduced motion. The selectors become .checkout-loader and the animation becomes checkout-spin. Its normal cycle takes 1.2 seconds; the reduced-motion duration becomes 3.6 seconds because the generator multiplies Speed by three. Here is the complete standalone output for those settings:

@keyframes checkout-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.checkout-loader {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e7ff;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: checkout-spin 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .checkout-loader, .checkout-loader div {
    animation-duration: 3.6s !important;
  }
}

<div class="checkout-loader" role="status" aria-label="Loading"></div>

Place the CSS in your stylesheet and the div where loading feedback belongs. Animation repeats indefinitely; it does not measure progress or stop when a request finishes. Your application owns that lifecycle. Generation happens in the browser, and Download HTML packages the current CSS and markup into loader.html for a standalone preview.

Which loader styles and usage presets are available?

The gallery contains Spinner, Dots, Pulse, Ring, Bars, Dual Ring, Ripple, Hourglass, Ellipsis, Grid, Roller and Circle Chase. Some use one element; others need children for staggered motion. Keep the generated markup rather than substituting an empty div for every style.

Style families and generated structures

Styles	Structure or behavior
Spinner, Ring, Dual Ring	One rotating element; colored top, top/right, or top/bottom borders respectively
Pulse, Hourglass, Circle Chase	One element using scale and opacity, transparent side borders, or a rotating top border respectively
Dots, Bars	Three bouncing dots or five scaling bars
Ripple, Ellipsis	Two expanding rings or four sliding/scaling dots
Grid, Roller	Nine grid cells or four orbiting elements with pseudo-element dots

Choose Usage preset first: changing it resets the selected style to Spinner. Standalone starts at 48px; Button (inline spinner) and Inline text start at 24px. Button output includes a disabled button with Loading text. Inline text adds Loading content… beside the loader. Both convert the loader's div structure to spans.

Skeleton block starts at 80px and replaces the selected animation with a rectangular opacity animation. Its width is twice Size, capped at its container width, and its height equals Size. It uses Secondary color and Speed, with fixed easing and a static reduced-motion fallback. Primary color, Border width, Easing, direction and the hidden-text checkbox do not change that skeleton output.

How do size, speed and easing change the animation?

Size ranges from 24 to 120px in 4px steps; Speed ranges from 0.4 to 3 seconds in 0.2-second steps. Border width ranges from 2 to 12px. These are CSS dimensions, and the style determines their meaning: Dots rounds each dot's diameter to 20% of Size rather than making every dot as wide as Size. Border-based loaders use Border width; filled dots do not.

Speed is a duration, so larger values mean slower motion. Most styles use it directly, while Ripple uses 1.6 times Speed and Ellipsis uses half. Stagger delays in generated CSS stay fixed when Speed changes. Easing offers Preset default, linear, ease, ease-in-out, steps(8) and Custom cubic-bezier. All four custom coordinates are clamped to 0–1 and rounded to two decimal places.

CSS Animations defines named @keyframes and the animation shorthand. Here, rotation runs from 0 to 360 degrees, while bouncing dots scale between zero and full size. Reverse direction changes animation playback rather than the exported element order. Ripple also animates position and dimensions, so performance depends on the chosen style and surrounding page; measure it in your actual interface.

How do you handle reduced motion and screen reader feedback?

Static (no animation) is selected initially. For regular loader output, the reduced-motion media query targets the root and child div elements; inline usage rewrites child selectors for spans. Ripple gets explicit full-size static rings with opacity 0.6. Slow down uses three times the Speed value, even for styles whose ordinary duration uses a different multiplier.

Generated HTML includes role="status" and aria-label="Loading". Selecting Add visually hidden "Loading" text replaces that label with a hidden span and adds its CSS helper. These attributes provide status semantics under WAI-ARIA; actual announcements depend on how the application inserts and updates the status. They do not establish accessibility compliance for an entire interface.

Pause gallery affects the preset thumbnails only. It does not pause the main preview or insert a pause control into exported code. Your application must handle completion messages, errors and any surrounding busy state.

How do you reuse the output without naming collisions?

Use a unique prefix for each independently styled loader. The generator replaces bt- throughout CSS and HTML, including keyframes, context classes and hidden-text helpers. A prefix accepts letters, digits, underscores and hyphens, is capped at 40 characters, and must begin with a letter or underscore after cleaning; otherwise the export uses bt-.

Copy the CSS and HTML after finishing your settings so their names match. Framework integration needs the same selectors and child structure; React also needs className attributes. Use Color Converter to prepare colors or CSS PX to REM Converter when adapting fixed dimensions to your stylesheet.

When should you use SVG instead of CSS and HTML?

Copy SVG and Copy data URI support Spinner, Ring and Dots only. SVG uses SMIL animation and includes its own dimensions and Loading label. It exports the selected style rather than the button, inline or skeleton wrapper, and contains no reduced-motion fallback. Use CSS output when that fallback matters. Email clients handle animation and SVG differently; test the actual message and keep it understandable without motion.

How do you center the loader in a container?

Center the exported element with a wrapper using flexbox. This additional CSS is an integration pattern, not part of the standalone loader export:

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

The second rule fills the viewport for an overlay. Add a suitable background and stacking order for your layout, then remove the overlay when loading finishes. A continuously repeating indicator reports activity, not percentage completion or remaining time.