28 CSS Loading Spinner Snippets – csshint

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

1.Triangle Loading Animation

See the Pen <a href='https://codepen.io/banik/pen/gdKWrq/'>Triangle Loading Animation</a> by Tony Banik (<a href='https://codepen.io/banik'>@banik</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Tony Banik

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

2.Various CSS Spinners

See the Pen <a href='https://codepen.io/Iulius90/pen/RaeWmY/'>CSS spinners</a> by Iulian Savin (<a href='https://codepen.io/Iulius90'>@Iulius90</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Iulian Savin

Made with

HTML(pug) / CSS

demo and code Get Hosting

3.Eclipse Spinner

See the Pen <a href='https://codepen.io/hakimel/pen/CxliK/'>CSS Spinner Animation</a> by Hakim El Hattab (<a href='https://codepen.io/hakimel'>@hakimel</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Hakim El Hattab

Made with

HTML(haml) / CSS(SCSS)

demo and code Get Hosting

4.Super Simple CSS Spinner

See the Pen <a href='https://codepen.io/mandelid/pen/vwKoe/'>Super Simple CSS Spinner</a> by Thomas Mandelid (<a href='https://codepen.io/mandelid'>@mandelid</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Thomas Mandelid

Made with

HTML / CSS

demo and code Get Hosting

5.Beaulti Circle

See the Pen <a href='https://codepen.io/Roosa/pen/yOQrdg/'>Beaulti Circle Load CSS3</a> by Elias (<a href='https://codepen.io/Roosa'>@Roosa</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Elias

Made with

HTML / CSS

demo and code Get Hosting

6.Pure CSS Spinners

See the Pen <a href='https://codepen.io/zyklus/pen/Esrot/'>Pure CSS Spinners</a> by Mark Kahn (<a href='https://codepen.io/zyklus'>@zyklus</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Mark Kahn

Made with

HTML(pug) / CSS(stylus)

demo and code Get Hosting

7.Spinners using Font Icons

See the Pen <a href='https://codepen.io/Keyamoon/pen/aHxuq/'>Spinners using Font Icons</a> by Keyamoon (<a href='https://codepen.io/Keyamoon'>@Keyamoon</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Keyamoon

Made with

HTML / CSS

demo and code Get Hosting

8.Olympic Rings

See the Pen <a href='https://codepen.io/CodeBoomer/pen/BzOPPz/'>Olympics CSS Spinner</a> by Boomer (<a href='https://codepen.io/CodeBoomer'>@CodeBoomer</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Boomer

Made with

HTML / CSS(SASS) / Js

demo and code Get Hosting

9.Bounce Delay Loader

See the Pen <a href='https://codepen.io/jonitrythall/pen/dNJRRK/'>Bounce Delay Loader</a> by Joni Trythall (<a href='https://codepen.io/jonitrythall'>@jonitrythall</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Joni Trythall

Made with

HTML(Haml) / CSS(SCSS) / Js

demo and code Get Hosting

10.Pure CSS Spinner

See the Pen <a href='https://codepen.io/chaoticpotato/pen/adlEg/'>Pure CSS Spinner</a> by Ömer Fatih (<a href='https://codepen.io/chaoticpotato'>@chaoticpotato</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Ömer Fatih

Made with

HTML(Haml) / CSS(Less)

demo and code Get Hosting

11.Quick loader

See the Pen <a href='https://codepen.io/thebabydino/pen/mgvPzp/'>Quick loader with CSS transforms, vars & Houdini magic </a> by Ana Tudor (<a href='https://codepen.io/thebabydino'>@thebabydino</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Ana Tudor

Made with

HTML(Pug) / CSS(SCSS) / JS(babel)

demo and code Get Hosting

12.One div loader

See the Pen <a href='https://codepen.io/FilipVitas/pen/QoVpom/'>One div loader</a> by Filip Vitas (<a href='https://codepen.io/FilipVitas'>@FilipVitas</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Filip Vitas

Made with

HTML(Pug) / CSS(Stylus)

demo and code Get Hosting

12.pure CSS 3D loader

See the Pen <a href='https://codepen.io/thebabydino/pen/QzJjLW/'>1 element pure CSS 3D loader</a> by Ana Tudor (<a href='https://codepen.io/thebabydino'>@thebabydino</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Ana Tudor

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

13.SVG ∞ loader

See the Pen <a href='https://codepen.io/thebabydino/pen/yjoPMJ/'>SVG ∞ loader (no JS, cross-browser, minimal code)</a> by Ana Tudor (<a href='https://codepen.io/thebabydino'>@thebabydino</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Ana Tudor

Made with

HTML/Pug / CSS

demo and code Get Hosting

14.gooey css loader

See the Pen <a href='https://codepen.io/megatroncoder/pen/Xqeyva/'>gooey css loader</a> by Decatron (<a href='https://codepen.io/megatroncoder'>@megatroncoder</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Decatron

Made with

HTML / CSS

demo and code Get Hosting

15.Preloader CSS

See the Pen <a href='https://codepen.io/SebastienOlivier/pen/vHEpo/'>Preloader CSS</a> by Sébastien Olivier (<a href='https://codepen.io/SebastienOlivier'>@SebastienOlivier</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Sébastien Olivier

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

16.Css3 Loader

See the Pen <a href='https://codepen.io/slmnbj/pen/fJGdH/'>Css3 Loader</a> by Salmen Bejaoui (<a href='https://codepen.io/slmnbj'>@slmnbj</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Salmen Bejaoui

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

17.Equalizes the loader

See the Pen <a href='https://codepen.io/caohim/pen/tseIj/'>Equalizes the loader</a> by Caohim (<a href='https://codepen.io/caohim'>@caohim</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Caohim

Made with

HTML(pug) / CSS(SaSS)

Get Hosting/caohim/pen/tseIj” class=”btn_blue floatleft” target=”_blank” rel=”external nofollow noopener noreferrer”>demo and code

18.Flexbox loader

See the Pen <a href='https://codepen.io/wontem/pen/jGvlI/'>Flexbox loader</a> by wontem (<a href='https://codepen.io/wontem'>@wontem</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

wontem

Made with

HTML(pug) / CSS(SaSS)

demo and code Get Hosting

19.Two Cube Loader

See the Pen <a href='https://codepen.io/bennettfeely/pen/wByBmJ/'>wByBmJ</a> by Bennett Feely (<a href='https://codepen.io/bennettfeely'>@bennettfeely</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Bennett Feely

Made with

HTML(pug) / CSS(SCSS)

demo and code Get Hosting

20.Cupcake – A simple, minimal loader.

See the Pen <a href='https://codepen.io/prayushS/pen/EjyaVy/'>Cupcake – A simple, minimal loader.</a> by Prayush S (<a href='https://codepen.io/prayushS'>@prayushS</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Prayush S

Made with

HTML(pug) / CSS

demo and code Get Hosting

21.Glitchy Loading Indicator

Author

Jack Rugile

Made with

HTML / CSS / JS

demo and code Get Hosting

22.Loading Animation CSS

See the Pen <a href='https://codepen.io/42EG4M1/pen/bVMzze/'>Loading Animation CSS</a> by Tatsuya Azegami (<a href='https://codepen.io/42EG4M1'>@42EG4M1</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Tatsuya Azegami

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

23.CSS Stairs Loader

See the Pen <a href='https://codepen.io/ispal/pen/mVaaJe/'>CSS Stairs Loader</a> by Irko Palenius (<a href='https://codepen.io/ispal'>@ispal</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Irko Palenius

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

24.Loading Animation

See the Pen <a href='https://codepen.io/johnheiner/pen/BNLzbJ/'>Loading Animation</a> by John Heiner (<a href='https://codepen.io/johnheiner'>@johnheiner</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

John Heiner

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

25.Code Loader

See the Pen <a href='https://codepen.io/ashmind/pen/zqaqpB/'>Code Loader</a> by Andrey Shchekin (<a href='https://codepen.io/ashmind'>@ashmind</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Andrey Shchekin

Made with

HTML / CSS(LESS)

demo and code Get Hosting

26.‘Making pancake’ loader

See the Pen <a href='https://codepen.io/pawelqcm/pen/ObwyNe/'>‘Making pancake’ loader</a> by Pawel (<a href='https://codepen.io/pawelqcm'>@pawelqcm</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Pawel

Made with

HTML(Pug) / CSS(SCSS)

demo and code Get Hosting

27.wineshop loader

See the Pen <a href='https://codepen.io/nazarelen/pen/GjKdVr/'>wineshop loader</a> by Elena Nazarova (<a href='https://codepen.io/nazarelen'>@nazarelen</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Elena Nazarova

Made with

HTML / CSS

demo and code Get Hosting

28.New Preloader

See the Pen <a href='https://codepen.io/WebSonata/pen/bRaONB/'>New Preloader</a> by Anastasiya Kuligina (<a href='https://codepen.io/WebSonata'>@WebSonata</a>) on <a href='https://codepen.io'>CodePen</a>.

Author

Anastasiya Kuligina

Made with

HTML / CSS

demo and code Get Hosting