Collection of hand-picked free HTML and CSS loading spinner code examples.

Update of May 2019 collection. 28 new items.

Related Articles

  1. CSS Loaders

Author

  • samuel garcia

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism Gradient Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • peyman

Made with

  • HTML / CSS

About a code

CSS Spinner Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

About a code

Another Spinner

Single element with pseudo elements and animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ty Strong

Made with

  • HTML / CSS (SCSS)

About a code

Animation with Translate and Z-index

Spinner/Loading animation with translate and z-index.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Travis John

Made with

  • HTML / CSS (SCSS)

About a code

Gooey Loaders

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Loader

Pure CSS loader with clip-path.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Spiral Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Loader

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS) / JS

About a code

Pure CSS Loader

1 element transparency tails.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: conic-gradient.js

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Liquid Loader

Clean code, pastel gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Liquid Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Zed Dash

Made with

  • HTML / CSS (SCSS)

About a code

CSS Single Element Goey Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

Loaders For Website

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Rings Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Dual Triangle Spinners

A collection of preload animations made using only two triangles, whether they look like practical ones or just plain weird.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Infinity Path Spinner

This one's an infinity path spinner that uses stepped opacity on two pseudo-elements whose parents spin round.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Melissa Em

Made with

  • HTML / CSS

About a code

Spinner

Opposites (attract) spinner animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Dipinto

Made with

  • HTML / CSS

About a code

Gradient Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sahar Ali Raza

Made with

  • HTML / CSS

About a code

50+ Pure CSS3 Preloaders

Smoother, lightweight, faster and easy to use product.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

About a code

Multicolor Spinner Ring

A multicolor spinner ring with animated SVG stroke-dash offsets. Styles and keyframes are generated based on the number of colors in a Sass list variable.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Dipinto

Made with

  • HTML / CSS

About a code

Spin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Osama Belal

Made with

  • HTML / CSS

About a code

Hexagon Spinner With CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Piotr Galor

Made with

  • HTML / CSS

About a code

Circular CSS Loader

Squeezing out a neat loader animation from under 70 lines of pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • myf

Made with

  • CSS

About a code

Simple Spinner

Simple spinner as background SVG image data URI with style.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Quick Loader With CSS Transforms, Vars & Houdini Magic

Uses Houdini to animate the scaling factor --sx of the bars, so it only works in Chrome with the Experimental Web Platform features flag enabled.

Compatible browsers: Chrome

Responsive: yes

Dependencies: -

Author

  • Dev Loop

Made with

  • HTML / CSS

About the code

Weird Spinner

This Is really a weird one...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dev Loop

Made with

  • HTML / CSS

About the code

Simple Spinners

These are some simple preloaders that can be used to make a process waiting time wonderful.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Filip Vitas

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

One Div Loader

HTML one div spinner.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About the code

CSS 3D Loader

One element pure CSS 3D loader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alex

Made with

  • HTML / CSS

About the code

CSS Spinner Animations

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

About a code

CSS Spinner Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ricardo Gouveia

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Squares Spinner

Elastic bouncing squares loader.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

About the code

Squares Spinner Animation

Simple spinner animation with pseudo elements and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS)

About the code

Red Dead Redemption Loader

A difficult shape to draw in CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jason Liquorish

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Spinner Animations

Playing around with CSS animations to create some simple spinner animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Uwe Chardon

Made with

  • HTML / CSS (Less)

About the code

Spinner Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Uwe Chardon

Made with

  • HTML / CSS (Less)

About the code

CSS Spinner Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Tony Banik

Made with

  • HTML (Slim) / CSS (SCSS)

About the code

Triangle Spinner Animation

Triangle spinner in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ben Evans

Made with

  • HTML / CSS (SCSS)

About the code

Loading Things... Spinner.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Amine Bahmed

Made with

  • HTML / CSS (SCSS)

About the code

Google Spinners Redesign

A collection of Google Loaders in a new look.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Rita Bradley

Made with

  • HTML / CSS

About the code

Simple CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Comet Spinner

Comet spinner in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Paolo Duzioni

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

One Element CSS Spinners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • João Santos

Made with

  • HTML / CSS (SCSS)

About the code

Spinner Loader

Resizable animated spinner with a blurred animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Terminal Spinner Demo image: Terminal Spinner

Author

  • Zeno Rocha

Made with

  • HTML / CSS

About the code

Terminal Spinner

Elegant terminal spinner with HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS3 Animations Spinners Demo image: CSS3 Animations Spinners

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Animations Spinners

Fully CSS3 animations spinners. No JS needed.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts, Reset.css, Autoprefixer.js

Demo image: Sugarcube Spinner Demo image: Sugarcube Spinner

Author

  • Milk Studio

Made with

  • HTML / CSS (SCSS)

About the code

Sugarcube Spinner

Pretty HTML and CSS sugarcube spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Autoprefixer.js

Demo image: CSS Spinners Demo image: CSS Spinners

Author

  • Iulian Savin

Made with

  • HTML (Pug) / CSS

About the code

CSS Spinners

Simple CSS loading indicators made with CSS and minimal HTML markup.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Spinner Demo image: Spinner

Author

  • Aditya Bhandari

Made with

  • HTML / CSS (SCSS)

About the code

Spinner

Pure CSS spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS and SVG Spinner Demo image: CSS and SVG Spinner

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS)

About the code

CSS and SVG Spinner

A modern SVG spinner animation in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Autoprefixer.js

Demo image: Polygon Spinner Demo image: Polygon Spinner

Author

  • neil tron

Made with

  • HTML / CSS / JavaScript

About the code

Polygon Spinner

A loading spinner that draws an SVG triangle and then animates it to a dodecagon and back.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: TweenMax.js, Underscore.js

Demo image: 8 Bit Spinner Demo image: 8 Bit Spinner

Author

  • Fabrizio Bianchi

Made with

  • HTML (Haml) / CSS

About the code

8 Bit Spinner

Pixelated circular loader with box-shadow.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Prefixfree.js

Demo image: CSS Loading Animation Demo image: CSS Loading Animation

Author

  • Martin van Driel

Made with

  • HTML / CSS

About the code

CSS Loading Animation

Nice effect for CSS loading spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple Repeating Spinner Demo image: Simple Repeating Spinner

Author

  • Hugo Wiledal

Made with

  • HTML / CSS (SCSS)

About the code

Simple Repeating Spinner

Simple repeating spinner with nice animation.

Compatible browsers: Chrome, IE, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS3 Loading Spinner Demo image: CSS3 Loading Spinner

Author

  • Matthew Roelle

Made with

  • HTML (Haml) / CSS (Sass)

About the code

CSS3 Loading Spinner

Cool CSS3 loading spinner snippet.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts, Autoprefixer.js

Demo image: Pure CSS Spinner Demo image: Pure CSS Spinner

Author

  • Ömer Fatih

Made with

  • HTML / CSS (Less)

About the code

Pure CSS Spinner

Pure CSS dots spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Spinner Demo image: Spinner

Author

  • Max Ruigewaard

Made with

  • HTML / CSS

About the code

Spinner

Simple spinner made with HTML and CSS animations.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Autoprefixer.js

Demo image: Loading Spinner Demo image: Loading Spinner

Author

  • Katy DeCorah

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Loading Spinner

Cool CSS3 loading spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Autoprefixer.js, Modernizr.js

Demo image: Rainbow Spinner Demo image: Rainbow Spinner

Author

  • Igor Amado

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Rainbow Spinner

HTML and CSS rainbow spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Prefixfree.js

Demo image: Simple CSS-only Loading Spinner Demo image: Simple CSS-only Loading Spinner

Author

  • Matt Sisto

Made with

  • HTML / CSS (SCSS)

About the code

Simple CSS-only Loading Spinner

A simple CSS-only loading spinner made with SASS

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Normalize.css

Demo image: Digital Spinner Demo image: Digital Spinner

Author

  • Christian Dannie Storgaard

Made with

  • HTML / CSS

About the code

Digital Spinner

CSS3 based spinner with discs rotating at different speeds.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Spinner Animation Demo image: CSS Spinner Animation

Author

  • Hakim El Hatta

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

CSS Spinner Animation

Another CSS spinner animation. Not practical since it uses a ton of DOM elements, but it looks pretty.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Spinner Demo image: Spinner

Author

  • Noel Delgado

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Spinner

Single DOM element spinner. "Clock arrows" made with generated content (pseudo-elements :before and :after). Animations applied to pseudo-elements.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Normalize.css, Autoprefixer.js