CSS Loading Spinner Generator

Build a pure-CSS loading spinner — size, color and speed — and copy the HTML and CSS.

Frequently asked questions

Does the spinner need JavaScript?

No. It's pure CSS — a bordered circle with a CSS keyframe animation. Drop the HTML and CSS into your page and it spins on its own.

How do I change the speed?

Lower the seconds value for a faster spin, raise it for slower. The number is the time for one full rotation.

How do I center it?

Put the spinner in a container with display:flex; align-items:center; justify-content:center, or set margin:0 auto on a block parent.