CSS Loader Generator

Create a pure-CSS spinner and copy the code — no images, no JavaScript.

Size: 48pxThickness: 5pxSpeed: 1sCSS Length: 216 chars

Presets

Size (48px)

Thickness (5px)

Speed (1s)

Spinner color

Track color

Live preview

CSS Code

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

How the CSS spinner works

This classic spinner is a square element with a fully rounded border. Three sides use a light track color and one side (the top) uses the accent color, so when the element spins via a simple @keyframes rotation it looks like a moving arc. It needs no images and no JavaScript — just paste the CSS and add class="loader" to a <div>.

More CSS tools: the animation generator, the transition generator, and the transform generator.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a spinner without an image or a JavaScript library.
Getting a loader whose colour comes from a theme variable.
Tuning speed so it reads as working rather than frantic.
Comparing a spinner against a skeleton placeholder.
Producing a small inline loader for a button's pending state.

Frequently Asked Questions

How is a spinner made from a border?: A square element with a full border-radius becomes a circle; giving three sides a transparent border and one a colour leaves a visible arc, and rotating it with a linear infinite animation spins that arc. No image, no SVG, and it scales cleanly at any size.
Which is cheaper to animate, a border spinner or an SVG?: Both are cheap if the animation is a `transform`. What costs is animating anything that triggers layout — a spinner built by changing width or margin repaints every frame. `rotate` and `opacity` stay on the compositor regardless of whether the shape came from CSS or SVG.
How do I make a loader accessible?: Give it `role="status"` and a visually hidden text label, or `aria-busy` on the region being loaded. A spinning shape communicates nothing to a screen reader, so a user hears silence during a wait that a sighted user sees explained.
When is a skeleton better than a spinner?: When the layout is known in advance. A skeleton shows where content will appear, which makes a wait feel shorter and prevents the jump when content arrives. A spinner is right when the shape of the result is unknown or the wait is under a second.
Should the loader respect reduced motion?: Yes. A continuously rotating element is exactly the kind of motion `prefers-reduced-motion` exists for. The usual accommodation is not removing the indicator but replacing the spin with a pulse or a static label, which still communicates that something is happening.

Common errors and gotchas

Omitting an accessible label, so a screen reader announces nothing while the user waits.
Ignoring reduced-motion preferences, where a spinning element can cause discomfort.
Animating a property that forces layout rather than transform, which costs performance.
Showing a spinner indefinitely on error, which reads as a hang rather than a failure.
Using a spinner for a wait short enough that it only flickers.