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.