Post thumbnail: 38 CSS Spinners

38 CSS Spinners

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

Update of July 2018 collection. 19 new items.

Related Articles

  1. CSS Loaders

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

  • 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

back to top