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.
29 free examples, most liked first. Click one to preview it and copy the code.
RGB Loading Effect
by @admin · Loaders
Glowing Squares Loader
by @admin · Loaders
Simple CSS loaders
by @admin · Loaders
Newton’s Cradle Loader
by @admin · Loaders
Battery Charging Progress
by @admin · Css Animation
Popsicle Loader
by @admin · Loaders
Tetris Block Loader
by @admin · Loaders
Hexagonal Loading Animation
by @admin · Loaders
Line Loading Animation
by @admin · Css Animation
Red loading animation
by @admin · Loaders
Loader
by @admin · Loaders
Circle Animation Loader
by @admin · Css Animation
Loading Animation
by @admin · Loaders
Download Animation
by @admin · Css Animation
Loading Animation v2
by @admin · Loaders
Loaders kit
by @admin · Loaders
Circle Loader v2
by @admin · Loaders
Glowing Loader Ring Animation
by @admin · Css Animation
Flat Preloader
by @admin · Loaders
Wavy Preloader Animation
by @admin · Loaders
Rainbow Loader Animation
by @admin · Css Animation
Single Element Absolute Center Overlay Spinner
by @admin · Css Animation
Circular Loader
by @admin · Loaders
Loading Animation
by @admin · Css Animation
8 Pre loader animation using css
by @admin · Loaders
Thermometer Loader
by @admin · Loaders
List Loaders
by @admin · Loaders
Box dots animation
by @admin · Loaders
Traffic Light Loader Animation
by @admin · Css Animation
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.