CSSAwwwards
+ Submit tool
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

48px
1s

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.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →