Post thumbnail: 19 CSS Spinners

19 CSS Spinners

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

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