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.

Share on X LinkedIn

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;}

Was this tool helpful?

How to use

Pick a type

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

Set size & speed

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

Choose colours

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

Copy CSS

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