Pure CSS Loaders
Pure CSS loaders are spinners, dots, bars and progress animations built from HTML elements and CSS keyframes, so they load instantly and need no images or scripts.
15 free examples, most liked first. Click one to preview it and copy the code.
Orbit Dots Loader
by @admin · Css Animation
Hexagon Loader Spinner
by @admin · Hexagons
Native Progress Bars
by @admin · Loaders
Spinner Trio
by @admin · Loaders
Equalizer Bars Loader
by @admin · Loaders
Shimmer Skeleton Loader
by @admin · Loaders
Animated Donut Ring
by @admin · Loaders
Bouncing Dots Loader
by @admin · Loaders
Folding Squares Loader
by @admin · Loaders
Steps Countdown Timer
by @admin · Loaders
Dual Ring Loader
by @admin · Loaders
Pulse Wave Loader
by @admin · Loaders
Typing Indicator Bubble
by @admin · Loaders
Battery Charging Loader
by @admin · Css Animation
Hourglass Loader
by @admin · Css Animation
Learn how it works
Read the step-by-step guide: How to Make a Pure CSS Loader (Spinner, Dots and Progress Bar)
Loaders FAQ
How do I make a CSS loading spinner?
Draw a circle with a border, color one side of it, and rotate it with an infinite @keyframes animation. The examples here show several variations you can copy.
How do I use these pure CSS loaders?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.