Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Loader Generator

Design a lightweight CSS loading spinner, ring, dots, or bars, with a live preview, then copy the self-contained animation.

Preview
Style

Size and speed

CSS
.loader {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 6px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(1turn); }
}

Add an empty element with class="loader" where the spinner should appear.

Everything runs in your browser. Nothing is uploaded.

How to create a CSS loading spinner

  1. Pick a style

    Choose a rotating ring, a row of pulsing dots, or a set of rising bars, and the preview switches to match right away.

  2. Set size, color, and speed

    Drag the sliders to set the overall size in pixels and the cycle speed in seconds, and pick the color with the swatch or a hex value.

  3. Watch the live preview

    The spinner animates in the preview as you adjust it, so you can judge the size, color, and pace before you use it.

  4. Copy the CSS

    The generated CSS below includes the keyframes and works on a single empty element. Click Copy CSS to grab it.

Why use this tool

Three spinner styles

A rotating ring, a row of pulsing dots, and a set of rising bars, each a familiar loading pattern, all from one control.

Live animated preview

The spinner runs in real time as you change the style, size, color, and speed, so the animation you see is exactly the one you copy.

Self-contained CSS with keyframes

Output includes the keyframes and targets a single class, so it works on one empty element with no images, fonts, or extra markup.

Lightweight animation

The motion only transforms and fades the shape rather than reflowing the page, so it stays smooth and cheap to run, even on modest devices.

Exact size, color, and speed

Set the precise pixel size from 16 to 96, a hex color, and the seconds per cycle, instead of settling for a fixed preset.

Runs entirely in your browser

The spinner and its CSS are built on your device; nothing is uploaded and there is no signup.

About this tool

This CSS loader generator builds a loading spinner as pure CSS, so you can drop it into any page without an image, an icon font, or a script. Choose one of three familiar styles, a rotating ring, a row of pulsing dots, or a set of rising bars, then set the size, color, and animation speed. The tool renders the spinner live and writes the matching CSS, including the keyframes, so the code you copy is exactly what you see moving.

The output is self-contained: it targets a single class and animates only the transform and opacity of the shape, which keeps it smooth and inexpensive even on lower-powered devices. Sizes run from 16 to 96 pixels and the speed covers a fraction of a second up to a slow three-second cycle, which is enough range for small button spinners, full-page loaders, and subtle inline indicators alike. To shape the motion further you can pair it with the cubic bezier easing tool, and the box shadow generator and color converter help when you are styling the component around it.

Everything is generated in your browser as you adjust the controls. Nothing is uploaded, there is no account, and the CSS exists only in your tab until you copy it.

Frequently asked questions

How does a CSS loading spinner work?
The spinner is a single element with a keyframe animation. Depending on the style it rotates a bordered circle, or pulses and scales dots and bars using the transform and opacity properties. Because it only animates those properties, the browser can run it smoothly without reflowing the page.
Which spinner styles can I make?
Three: a ring that spins a single colored arc around a faint track, a row of three dots that fade and pulse in sequence, and a set of three bars that rise and fall like an equalizer. Each style produces its own CSS and keyframes.
How do I change the size, color, and speed?
Use the size slider to set the overall dimension from 16 to 96 pixels, the speed slider to set the seconds per cycle, and the swatch or hex field to set the color. Every change updates the preview and the CSS at once.
Do I need extra HTML or images?
No. The CSS works on a single empty element with the class name loader, and the shapes are drawn with borders and pseudo-elements. There are no images, icon fonts, or scripts to include.
Will the spinner slow down my page?
It is designed to be light. The animation only changes the transform and opacity of one small element, which browsers handle on the compositor, so it stays smooth and uses little processing even at fast speeds.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server. The spinner is rendered and its CSS is generated locally, with no account and no upload.

Related tools