Free free to download and use them as a loading indicator and/or preloader for your dynamic content like AJAX loader, image/content lazy loading indicator, image preloader, and much more.
Please note that all the loading spinners listed here are animated with CSS3 so they should be able to work nicely in modern browsers which support CSS3 properties like transitions, transforms, @keyframes, animations, etc. Let’s check them out!
Last Updated: Jan 05, 2022
Table Of Contents:
- Single Element CSS Loading Spinner Packs
- Other Pure CSS Loading Spinner Packs
- SVG Loading Spinners
- Creative Loading Spinners
A collection of different types of CSS loaders, spinners and their source code.
A set of 9 single element loading spinners created using CSS.
A set of 6 animated vintage loaders in pure CSS/CSS3.
A set of 120+ pure CSS/CSS3 loaders and spinners for your next web design project.
A collection of animated loaders made with pure CSS.
9 pure CSS single element loading spinners.
CSS loading animations made by single element.
A collection of colorful pure CSS Spinners.
CSS Spinners and Loaders – Modular, Customizable and Single HTML Element Code
Single Element Pure CSS Spinners & Loaders.
A couple of simple examples of loaders using only one div and CSS.
Pure text, CSS only, font independent, inline loading indicators.
A set of SCSS mixins for single element loaders and spinners
SPINNERS is a collection of HTML and CSS Spinners, which are animations that show the user that some content is being loaded.
Cool spinners or loaders with pure CSS.
Pure css loading animations.
12 Spinners HTML5 and CSS3 no images, just css animations and 1 div tag in the HTML. NO JS
An awesome collection of — Pure CSS — Loaders and Spinners.
Simple CSS spinners and throbbers made with CSS and minimal HTML markup.
This is a collection of loading spinners animated with CSS.Each spinner consists of a single div with a class of loader and content text of “Loading…”. The text is for screen readers and can be used as a fallback state for older browsers.
6 pretty cool loading animations that can be used as loading spinners while loading content in the document.
A collection of pure CSS loaders.
A collection of Google loaders in a new look.
Just another CSS only loading spinners and page loaders.
small, elegant pure css spinner for ajax or loading animation.
STYLED & ANIMATED WITH PURE CSS
A collection of animated reloaders built with CSS Animation and Keyframes.
pure css loaders.
Pure CSS spinner like iOS UIActivityIndicatorView
Delightful, performance-focused pure css loading animations.
A collection of pure CSS spinners.
SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback (see below.)
Loading spinner created using pure CSS and SVG.
Tumblr-style cog loading animation made with CSS and SVG icons
Take any simple inline SVG and turn it into a spinner! Branding is super-flexible and set through a Sass mixin.
Loading icons and small animations built purely in SVG, no CSS or JS.
A collection of preload animations made using only two triangles.
Facebook inspired content preloader with pure CSS.
Pokemon go loaders in pure CSS.
Recreating the google loading images. – Google Now loading bar – gmail loading circle – Android Wear (Moto360/LG G) boot screen…
A selection of loaders all based around a line of 6 blocks. Uses CSS3 animation and transforms to create a variety of subtle loading effects.
Google loading spinner for Google+ and Youtube Comments in CSS.
A nice looking loading spinner that creates an animated loader for Ajax requests in a creative way, based on CSS3 animations.
A pie chart-style CSS3 loader.
A twinner spinner built only with CSS/CSS3.
I’ll update the list as soon as possible if I find more cool CSS based loading spinners on the web. Please share it with your friends if you like.