80+ Best Pure CSS Loading Spinners For Front-end Developers (2022 Update)

Have noticed that there’re a large number of Javascript (or jQuery) based loading spinners for dynamic content out there, however, the CSS technology can do the same thing with better performance and less coding.

In this post, I would like to share with you a hand-picked list of 80+best loading spinners animated with pure CSS/CSS3 for your next project, for inspiration, or for your particular users who have Javascript DISABLED.

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!

You might find more JavaScript & CSS based loading indicators & loading spinners on CSSScript.com.

Last Updated: Apr 23, 2022

Table Of Contents:

Single Element Loading Spinner Packs

The Dots vs The Bars

See the Pen
The Dots vs The Bars
by Temani Afif (@t_afif)
on CodePen.

CSS Loaders & Spinners

A collection of different types of CSS loaders, spinners and their source code.

CSS Loaders & Spinners

Simple CSS loaders

A set of 9 single element loading spinners created using CSS.

See the Pen
Simple CSS loaders
by Jenning (@jenning)
on CodePen.

Vintage Loaders

A set of 6 animated vintage loaders in pure CSS/CSS3.

See the Pen
Vintage Loaders
by Sagee Conway (@saconway)
on CodePen.

CSS3 loaders and spinners

A set of 120+ pure CSS/CSS3 loaders and spinners for your next web design project.

Live Demo

CSS3 loaders and spinners

Houdini-animated Single Element Spinners

Houdini-animated Single Element Spinners


css-only-loaders

A collection of animated loaders made with pure CSS.

Live Demo

css-only-loaders


50+ Pure CSS3 Preloaders

50+ Pure CSS3 Preloaders


SpinBolt

9 pure CSS single element loading spinners.

Live Demo

SpinBolt


1 Element CSS Spinners

1 Element CSS Spinners-min


three-dots

CSS loading animations made by single element.

Live Demo

three-dots-min


CSS Spinners & Loaders

A collection of colorful pure CSS Spinners.

Live Demo

CSS Spinners & Loaders


CSSPIN

CSS Spinners and Loaders – Modular, Customizable and Single HTML Element Code

Live Demo

csspin


loaderskit

Single Element Pure CSS Spinners & Loaders.

Live Demo

loaderskit


css-loader

A couple of simple examples of loaders using only one div and CSS.

Live Demo

css-loader


text-spinners

Pure text, CSS only, font independent, inline loading indicators.

Live Demo

text-spinners


SpinThatShit

A set of SCSS mixins for single element loaders and spinners

Live Demo

spinthatshit


Spinners

SPINNERS is a collection of HTML and CSS Spinners, which are animations that show the user that some content is being loaded.

Live Demo

spinners


CSS LOADERS

css-loaders


mk-spinners

Cool spinners or loaders with pure CSS.

Live Demo

mk-spinners


loader

Pure css loading animations.

Live Demo

loader


CSS Loading Spinners

12 Spinners HTML5 and CSS3 no images, just css animations and 1 div tag in the HTML. NO JS

CSS Loading Spinners


load-awesome

An awesome collection of — Pure CSS — Loaders and Spinners.

Live Demo

load-awesome


css-spinners

Simple CSS spinners and throbbers made with CSS and minimal HTML markup.

css-spinners


Single-Element Loader Mixins

Single-Element Loader Mixins


CSS spinners

CSS spinners


Single Element CSS Spinners

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.

Live Demo

Single Element CSS Spinners


Single element loaders

Single element loaders


Other Pure CSS Loading Spinner Packs

CSS Loading Animation

6 pretty cool loading animations that can be used as loading spinners while loading content in the document.

CSS Loading Animation

LoadLab

A collection of pure CSS loaders.

Live Demo

LoadLab-min


Google Loaders Redesign

A collection of Google loaders in a new look.

Live Demo

Google Loaders Redesign


Spinners & Page Loaders Pure CSS

Just another CSS only loading spinners and page loaders.

Spinners & Page Loaders Pure CSS


css-spinner

Live Demo

small, elegant pure css spinner for ajax or loading animation.

css-spinner


Pure CSS hexagonal spinners

Pure CSS hexagonal spinners


PRELOADERS

STYLED & ANIMATED WITH PURE CSS

Live Demo

PRELOADERS


Animated Preloader Collection

A collection of animated reloaders built with CSS Animation and Keyframes.

Animated Preloader Collection


css-loader

Live Demo

pure css loaders.

css-loader


ispinner

Live Demo

Pure CSS spinner like iOS UIActivityIndicatorView

ispinner


Simple CSS Spinners

Simple CSS Spinners


loaders.css

Delightful, performance-focused pure css loading animations.

Preview

loaders.css


CSS spinners

Demo

A collection of pure CSS spinners.

CSS spinners


Collection of animated loaders

Collection of animated loaders


CSS Loading Spinners

CSS Loading Spinners


LESS loaders

LESS loaders


Loading Animations

Loading Animations


Pure css loaders and spinners

Demo & Download

Pure css loaders and spinners


SpinKit

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.)

Demo

Download

SpinKit


SVG Loading Spinners

Loading spinner created using pure CSS and SVG.

uiball-loaders

Live Demos

Modern, tree-shakeable loaders & spinners for React. Made with CSS, HTML, and a splash of SVG.

uiball-loaders


Tumblr Style Cog Spinners

Live Demos

Tumblr-style cog loading animation made with CSS and SVG icons

Tumblr Style Cog Spinners


SVG Loader Animation

SVG Loader Animation


Spin Cycle CSS-powered spinner from any inline SVG

Take any simple inline SVG and turn it into a spinner! Branding is super-flexible and set through a Sass mixin.

Spin Cycle CSS-powered spinner from any inline SVG


Animated SVG Loaders

Animated SVG Loaders


SVG-Loaders

Loading icons and small animations built purely in SVG, no CSS or JS.

SVG-Loaders


SVG Preloaders

SVG Preloaders


SVG Loading Images

SVG Loading Images


Thinking about SVG-preloaders

Demo & Download

Thinking about SVG-preloaders


Creative Loading Spinners

Dual Triangle Preloaders

A collection of preload animations made using only two triangles.

Dual Triangle Preloaders


Simple content preload

Facebook inspired content preloader with pure CSS.

Simple content preload


Pokéball Loader

Pokemon go loaders in pure CSS.

Pokéball Loader


Stylization HTML5 Progress element

Stylization HTML5 Progress element


New Google Loader

New Google Loader


Zero element loading animations

Zero element loading animations


Simple CSS Loading Spinner

Simple CSS Loading Spinner


Google loading stuff

Recreating the google loading images.   – Google Now loading bar – gmail loading circle – Android Wear (Moto360/LG G) boot screen…

Google loading stuff


iOS, OS X Spinner

iOS OS X Spinner


Expand-contract loader animation

Expand-contract loader animation


Coolors Loader

Coolors Loader


CSS3 Preloader Circle

CSS3 Preloader Circle


Another Loading Animation

Another Loading Animation


Atom Loader

Atom Loader


Random Loader

Random Loader


Block Loaders

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.

Block Loaders


CSS Loading Bar

CSS Loading Bar


Spinner 2

Spinner 2


Canvas Sparkly Circle Loader

Canvas Sparkly Circle Loader


Spinner

Spinner


CSS3 Loader

CSS3 Loader


A CSS cubic loader

A CSS cubic loader


Colorful Spinner

Colorful Spinner


Simple CSS 3 Loader

Simple CSS 3 Loader


Atom Loading Icon

Atom Loading Icon


CSS3 Loading Animation

CSS3 Loading Animation


Loading Square

Loading Square


2 Shapes Spinner

2 Shapes Spinner


Spinnerama with embedded animation

Spinnerama with embedded animation


CSS3 Loading Spinner

CSS3 Loading Spinner


motion blur loader

motion blur loader


Counterrotation

Counterrotation


Pure Css Loader – Square

Pure Css Loader - Square


Wavy Loading Animations

Wavy Loading Animations


Puls Loading

Puls Loading


Square Spinner

Square Spinner


Simple CSS3 loader animation

Simple CSS3 loader animation


CSS Loading Boxes Animation

CSS Loading Boxes Animation


Material Design Spinner

Material Design Spinner


GSPreloader

GSPreloader


Mobile Google/Tumblr Style Loader

Mobile Google Tumblr Style Loader


Equalizes the loader

Equalizes the loader


Create A CSS3 Spinning Preloader

Create A CSS3 Spinning Preloader


Loading Animation MySensors

Loading Animation MySensors


Beautiful Loading Screen

Beautiful Loading Screen


css spinning loader

css spinning loader


Colorful loader

Colorful loader


Clean simple Ajax Spinner

Clean simple Ajax Spinner


Circle Loader

Circle Loader


Loading indicator: The flower

Loading indicator The flower


Loading indicator

Loading indicator


Blurry Loader

Blurry Loader


Circle Loader

Circle Loader


Pulsing Loader

Pulsing Loader


CSS3 Loader

CSS3 Loader


Twisty Spin

Twisty Spin


Google loading spinner

Google loading spinner for Google+ and Youtube Comments in CSS.

Google loading spinner


Nice CSS3 Based Loading Spinner

A nice looking loading spinner that creates an animated loader for Ajax requests in a creative way, based on CSS3 animations.

Nice CSS3 Based Loading Spinner


Android 4.4 Kitkat loader CSS

Android 4.4 Kitkat loader CSS


loader

A pie chart-style CSS3 loader.

loader


Battlefield Loading Indicator

Battlefield 3 Loading Indicator


Twinner Spinner

A twinner spinner built only with CSS/CSS3.

Twinner Spinner


Summary:

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.

See Also:

6 Comments

  1. codeJS November 27, 2014
  2. Anil Sahu December 21, 2014
  3. Demon April 1, 2015
  4. Matt May 7, 2015
  5. Vralius May 17, 2016

Leave a Reply