Skip to content
Toolars
Explore
Report bug

Design · Local utility

CSS Loader Generator

Design an orbit-ring or three-dots loading spinner with size, stroke, speed, and color controls, and copy CSS that respects reduced motion.

Task path / input to outcome

Pick a loader style

Runs locally · Nothing is uploaded

How CSS Loader Generator works, privacy, and related tools

Task path / input to outcome

How to design a CSS loader

  1. 01

    Pick a loader style

    Open Loader style and choose Orbit ring for a classic spinning ring or Three dots for a bouncing dot trio. The live preview animates with every change you make, and each style ships its own @keyframes when you export.

  2. 02

    Size the frame and stroke

    Use a 24–160 px frame and 2–20 px stroke or dots. A ring stroke must be less than half the frame. Three dots must fit with at least 2 px between them; otherwise copying and downloading are disabled. The ring’s exported dimensions include its border.

  3. 03

    Tune speed and colors

    Choose a Cycle duration from 0.2 to 4 seconds in 0.05 s steps. Active color sets the ring's top stroke or the middle dot; Track color sets the rest of the ring or the two outer dots. Slower cycles read as calm background work; fast ones feel urgent.

  4. 04

    Or start from the sample

    Press Load sample to apply a bold Three dots preset — a 72 px frame, 12 px dots, and a 0.75 s cycle in red and yellow — as a jumping-off point. Reset always returns to the default orbit ring.

  5. 05

    Copy or download the CSS

    Press Copy CSS to put the ruleset on the clipboard, or Download .css to save toolars-loader.css. The output panel shows the exact bytes you are exporting, and both buttons stay disabled while any value fails validation.

  6. 06

    Wire it into your markup

    Orbit ring needs a single element carrying the .loader class; Three dots expects three span children inside it. The export includes a prefers-reduced-motion block that stops the animation for motion-sensitive visitors.

Tool facts

Processing
In your browser
Input leaves this device
Never
Retention
Nothing is stored
Price
Free

Your input stays in the browser.

CSS Loader Generator uses its verified local execution path and does not create a hidden input or output history.

Local execution

Runs inside the current browser tab.

No hidden processing

Active tool data never becomes a Toolars document record.

No account required

Use the core workflow without creating a profile. Favorites sync to your account after you sign in.

Immediate reset

Clear the tab and the active working data is gone.

When CSS Loader Generator is useful

Build an orange orbit ring

In a 2026-09-24 local browser run, choose Orbit ring, a 64 px frame, 8 px stroke, 1.2 s cycle, Active color #ff6600 and Track color #dfe3ea. The preview stays valid; exported .loader CSS sets width and height to 64px, an 8px #dfe3ea border, an orange top border and toolars-spin 1.2s linear infinite.

Export a three-dot sample

Load sample switches to Three dots at 72 px, 12 px dots and 0.75 s, with red #f21a10 in the middle and yellow #ffd11a on the outside. The CSS uses an 18px gap and -0.25s/-0.5s delays; copied text and downloaded toolars-loader.css matched byte for byte at 695 UTF-8 bytes in the local run.

Fix dots that do not fit

With the three-dot sample active, reduce Frame size to 24 px while keeping 12 px dots. The preview says CHECK VALUES and “Three dots and their gaps must fit inside the frame”; generated CSS clears, and Copy CSS and Download .css are disabled. Restore 72 px to recover the 695-byte CSS and enabled export.

What CSS Loader Generator actually does

A dashboard that refreshes every few seconds needs a spinner in the brand palette; a checkout button wants a busy state while the payment confirms; a prototype deserves better than the browser default. Settling the frame, stroke, and cadence visually means the loader is right before a single line enters the stylesheet — and because the generator runs entirely in this tab, an unreleased product's colors and naming never leave the machine. Export is one click once the motion feels right.

Common questions

What HTML does the generated CSS expect?
Orbit ring works with a single element carrying the .loader class. Three dots expects three span children inside .loader; the stylesheet staggers their animation delays automatically, so the markup stays trivial and no extra classes are needed.
Why does the preview say CHECK VALUES?
Use a 24–160 px frame and 2–20 px stroke or dots. A ring stroke must be less than half the frame. Three dots must fit with at least 2 px between them; otherwise copying and downloading are disabled. The ring’s exported dimensions include its border.
How do the three dots stay in sync?
The stylesheet handles the choreography: the middle span takes the Active color, and the second and third spans receive negative animation delays of one-third and two-thirds of the cycle, so the bounce staggers evenly around the loop.
Does the loader respect reduced-motion settings?
Yes. Every export ends with a media query for prefers-reduced-motion that turns the animation off — the dots variant also settles at a steady opacity — so visitors who ask for less motion get a calm, static indicator instead of a spinning one.
Can I adjust the loader after pasting it into my project?
Of course; the output is plain CSS with readable values. Change the pixel sizes, the duration, or the colors directly in your stylesheet — the @keyframes are ordinary declarations too, so every part of the loader stays editable after export.
Are my settings uploaded anywhere?
No. The generator runs fully inside the current browser tab, needs no account, and no value enters storage, logs, analytics, or the network. Press Reset to restore the defaults; closing the tab discards everything.

Continue in Design

Related tasks, not a dead end.

Move into another focused workspace without returning to the full index.

CSS Checkbox Generator

Style a custom checkbox with size, border, and state colors, and copy CSS that keeps a real, keyboard-accessible input underneath.

Create

CSS Switch Generator

Design a pure-CSS toggle switch with track, thumb, and two-state colors, and copy code with focus and reduced-motion handling included.

Create

CSS Clip Path Generator

Edit polygon points by dragging, keyboard or coordinates. Start with four presets and copy a clip-path declaration or full CSS, locally.

Create

CSS Background Pattern Generator

Compose dots, grid, or diagonal background patterns from pure CSS gradients — no image file — with tile, mark, and color controls.

Create