Micro Tools
Advertisement

Spinner collection

Browse 12 pure-CSS loading spinners: rings, dots, bars and pulse effects. Click any spinner to preview it large and copy its standalone CSS.

Pick a spinner

Click a spinner to see its code. All are pure CSS, no JavaScript needed.

Preview and CSS
Ring
Advertisement

Why CSS-only spinners win

A pure CSS spinner needs no JavaScript thread, so it keeps animating even while the main thread is busy fetching data, which is exactly when you need it most. Each spinner here is a single div plus keyframes, and the copied code runs standalone in any project.

How the staggered delays create motion

Most multi-part spinners are one animation copied across siblings with incremental animation-delay values. The dots, bars and wheel all use this trick: identical keyframes, offsets of 0.15 seconds, and your brain reads the sequence as continuous motion.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Spinner Collection FAQs

Which spinner should I use for a button loading state?
The Ring or Dual ring at 20 to 24px, in white, placed inside the button. Small rings read clearly at tiny sizes while dots and bars need more room to be legible.
How do I change the spinner color?
In the copied CSS, replace every #7c3aed with your brand color. For the Ring spinner also check border-top-color, and for Dual ring both border-top-color and border-bottom-color.
Can I make the spinner bigger or smaller?
Yes. Scale the whole thing with transform: scale(1.5) on the wrapper, or adjust the width, height and border widths proportionally. Keyframe animations scale cleanly because they are resolution independent.
Do these spinners work without the extra CSS on my page?
Yes. The copied code is fully standalone: it includes the class styles and the @keyframes they need. Nothing depends on this site's stylesheet.
Are CSS spinners accessible?
Add role="status" and an aria-label like "Loading" to the spinner wrapper so screen readers announce it. Also respect prefers-reduced-motion by pausing the animation for users who request it.
Advertisement