How do I add a CSS loader to my project?

Click any loader on this page, the complete HTML and CSS lands on your clipboard. Paste it into your stylesheet (or a Tailwind layer, a Framer code component, anywhere) and rename the class if you want.

Are these CSS spinners free to use commercially?

Yes. No attribution required, no licence, no signup. Use them in client work, ship them in production. They were built by the team at FindDevs Australia as a free resource.

Do these loaders work without JavaScript?

Every loader on this page is pure CSS. No JavaScript dependencies, no external libraries, no images. Drop the snippet in and it animates.

Will these CSS spinners work in older browsers?

They use standard CSS animations and transforms supported in every browser released in the last decade, Chrome, Safari, Firefox, Edge, mobile Safari, Chrome for Android. No vendor prefixes needed.

Do these loaders respect prefers-reduced-motion?

Out of the box, no, but adding @media (prefers-reduced-motion: reduce) { .your-loader { animation-duration: 6s; } } around any loader you ship is the polite thing to do for users with motion sensitivity.

Free CSS Library · Click to Copy

50 CSS Loaders to Keep Users Patient

50 hand-crafted, pure-CSS spinners and loading animations across spinners, dots, bars, rings, skeletons, waves and creative styles. Click any loader to copy the complete HTML and CSS. No images, no libraries, no signup. Free for any project.

Jump to loaders

#001 Classic ring Spinner

#002 Thin ring Spinner

#003 Dual arc Spinner

#004 Gradient ring Spinner

#005 Squiggle Spinner

#006 Spinner XL Spinner

#007 Soft pulse ring Spinner

#008 Two-tone Spinner

#009 Reverse spin Spinner

#010 Slow professional Spinner

#011 Bouncing trio Dots

#012 Pulsing trio Dots

#013 Wave dots Dots

#014 Loading dots Dots

#015 5-dot ripple Dots

#016 Vertical bar dots Dots

#017 Three-dot fade Dots

#018 Orbital dot Dots

#019 Counter-orbit Dots

#020 Pong dots Dots

#021 Linear stripe Bars

#022 Indeterminate Bars

#023 Equaliser Bars

#024 Gradient bar Bars

#025 Stacked bars Bars

#026 Striped progress Bars

#027 Line wave Bars

#028 Sliding strip Bars

#029 Double ring Rings

#030 Nested triple Rings

#031 Ripple ring Rings

#032 Pulse ring Rings

#033 Loading ring + dot Rings

#034 Yin yang Rings

#035 Shimmer line Skeleton

#036 Skeleton card Skeleton

#037 Avatar + text Skeleton

#038 Pulse block Skeleton

#039 Wave dots Wave

#040 Audio bars Wave

#041 Water drop Wave

#042 Sine wave Wave

#043 Square morph Creative

#044 Pacman Creative

#045 Heartbeat Creative

#046 Cube flip Creative

#047 DNA helix Creative

#048 Boxes Creative

⏳

#049 Spinning text Creative

#050 Coin flip Creative

More free resources

Copied!

How to use

Click. Paste. Ship.

Click any loader above. The complete HTML + CSS lands on your clipboard.
Paste anywhere: your stylesheet, a Tailwind @layer, a Framer code component, a React/Vue/Svelte template.
Rename the class if you want, they're scoped .ld1 to .ld50 so they won't collide with anything in your stylesheet.
No attribution required. No licence, no signup. Use them in client work, ship them in production.

A note on accessibility

For users with motion sensitivity, wrap any loader in a prefers-reduced-motion media query and either slow the animation down or fall back to a static "Loading…" label. It's three lines of CSS and it costs you nothing:

@media (prefers-reduced-motion: reduce) {
  .ld1 { animation-duration: 6s; }
}

Built by the team at FindDevs, Australia's #1 network for comparing developer quotes. If you need a real engineer to wire any of these into a production app, get 3 free quotes →