CSS Loading Spinner. 8 styles, image-free pure CSS.
⏳ Preview

How to use

  1. Pick spinner type (8 styles).
  2. Set size, speed, thickness.
  3. Choose colors.
  4. Copy HTML+CSS and paste.

Key features

  • 8 types (ring · circle · dots · bars · pulse · dual · bouncing · ellipsis)
  • Free size/speed/thickness control
  • Primary, track, background colors
  • Full HTML+CSS code copy
  • Pure CSS — no images, fast load

Use cases

  • Page load — first-time entry
  • Button click loading — form submit
  • API call wait — data fetch
  • Image loading — large lazy-loaded images
  • Progress indicators — in-progress states

Picking the right spinner

(1) Ring / Circle — most classic, universal. (2) Dots / Ellipsis — "...loading" feel, chat/message UI. (3) Bars — music/equalizer. (4) Pulse — soft and friendly, mobile apps. (5) Bouncing — playful, games/kids.

FAQ

Ideal speed?

0.8–1.2 s is standard. Too fast feels frantic; too slow feels stalled.

Accessibility (screen readers)?

Add `role="status"` and a visually-hidden "Loading..." text.

vs SVG spinner?

CSS is lighter and faster. SVG only for complex shapes.

Free?

Yes.