CSS Loader

Pure CSS loading animations — spinner, dots, pulse, and bars. Adjust size, speed, color, copy HTML + CSS.

PrivateIn your browserInstantUnlimited

Size 36px

Speed 0.8s

Border 4px

Color

CSS output

.easy24-loader {
  width: 36px;
  height: 36px;
  border: 4px solid color-mix(in srgb, #0f6e68 25%, transparent);
  border-top-color: #0f6e68;
  border-radius: 50%;
  animation: easy24-loader-spin 0.8s linear infinite;
}

@keyframes easy24-loader-spin {
  to { transform: rotate(360deg); }
}

/* HTML */
<div class="easy24-loader"></div>

HTML snippet

<div class="easy24-loader"></div>

CSS-only animations — no JavaScript library. Dots and bars need the span markup shown below.

Preview

How it works

Choose loader type

Spinner ring, bouncing dots, pulsing circle, or scaling bars — all CSS keyframes.

Adjust look and timing

Set size, animation speed, color, and spinner border thickness.

Copy CSS and HTML

Preview live, then copy or download CSS plus the small HTML snippet where needed.

Why pure CSS loaders?

Lightweight spinners avoid bundling animation libraries for simple loading states in apps and landing pages.

Why use this tool

Four loader styles
Live animated preview
Size, speed, and color controls
HTML snippet for multi-element loaders
Keyframes included in output
Unlimited use — no daily cap

Questions

What does CSS Loader do?

It generates self-contained CSS loading animations you can drop into any page without JavaScript.

Do I need extra HTML?

Spinner and pulse use one div. Dots and bars need three span elements inside .easy24-loader.

Can I change animation speed?

Yes. The speed slider sets the keyframe duration in seconds.

Will this work in all browsers?

CSS animations and color-mix are widely supported. Older browsers may ignore color-mix in the spinner track.

Is my CSS sent to a server?

No. Generation runs entirely in this browser tab.

Is there a daily limit?

No. This generator is unlimited on the free plan.

If Easy24 helped, buy a coffee

Tools stay free in your browser. One-time thanks via Kreosus. Turkish cards work.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open