Built-in toolFree · No signup

CSS Loading Spinner Generator

Create animated CSS loading spinners with live preview. Choose from 5 animation types — Border Spin, Dots Bounce, Pulse Ring, Bars, and Dual Ring. Control size, colour, and animation speed. The output includes complete self-contained CSS with @keyframes.

Spinner type

Size48px

Speed1s

Primary color

Track / secondary color

CSS Output

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner {  width: 48px;  height: 48px;  border: 4px solid #e0e0e0;  border-top-color: #1D9E75;  border-radius: 50%;  animation: spin 1s linear infinite;}

How to use

01

Pick a type

Border Spin is the classic choice. Dots Bounce and Bars work well for content loading states.

02

Set size & speed

Match the size to its context — 24px for inline, 48px for full-screen. Slow to ~1.5s for subtle effects.

03

Choose colours

Set primary to your brand colour. The track/secondary colour provides contrast for multi-element spinners.

04

Copy CSS

Copy CSS includes complete @keyframes — paste directly into your stylesheet. No extra dependencies.

More CSS animation tools

From our directory of 30+ CSS tools.

Animista preview

Animista

Browse, customise, and export ready-made CSS animations on demand.

#animation#keyframes#transitions

Keyframes.app preview

Keyframes.app

Visual CSS animation timeline editor with shadow, color, and easing tools.

#animation#keyframes#timeline

CSS Loaders preview

CSS Loaders

600+ pure CSS loading spinners and animations, copy in one click.

#loaders#spinners#animation

Whirl CSS preview

Whirl CSS

100+ pure CSS loading animations with a searchable, copyable library.

#loaders#animation#spinners

Magic Animations preview

Magic Animations

CSS animation library with dramatic, attention-grabbing entrance effects.

#animation#library#effects

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →