50 inspiring Loading Animations (CSS and JavaScript)

To bridge waiting times on websites and in web applications, the use of CSS loading animations is perfectly suitable. Here you can find a selection of the most creative and inspiring CSS spinners!

Sometimes it takes a few seconds for a complex website or application to load. So that your visitor knows that something is happening, you should definitely include a loading animation – this is also quite simple, as I will demonstrate at the end of the post with a short video.

If you like a loading animation, you can simply copy&paste 🙂

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Dump Truck Loading Animation

See the Pen Dump Truck Loading Animation by Jon Kantner (@jkantner) on CodePen.

Author: Jon Kantner;
Coded in: HTML, CSS (SCSS), JS;

#2 Square in a circle – Loading Animation

See the Pen Square in a circle – Loading Animation by Ray (@raymondyang) on CodePen.

Author: Ray;
Coded in: HTML, CSS (SCSS);

#3 Rainbow Loader

See the Pen Rainbow Loader by Jack Rugile (@jackrugile) on CodePen.

Author: Jack Rugile;
Coded in: HTML, CSS;

#4 CSS Text filling with water

See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen.

Author: Lucas Bebber;
Coded in: HTML, CSS (SCSS);

#5 Single Element CSS-Only Absolute Center Overlay Spinner

See the Pen Single Element CSS-Only Absolute Center Overlay Spinner by MattIn4D (@MattIn4D) on CodePen.

Author: MattIn4D;
Coded in: HTML, CSS;

#6 Material Design Spinner

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

Author: dissimulate;
Coded in: HTML, CSS;

#8 Cog loading animation

See the Pen Cog loading animation by Jamie Coulter (@jcoulterdesign) on CodePen.

Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);

#9 Cube loading animation

See the Pen Cube loading animation by Paul Grant (@cssinate) on CodePen.

Author: Paul Grant;
Coded in: HTML, CSS (SCSS);

#10 CSS loading animation 12

See the Pen CSS loading animation 12 by Martin van Driel (@martinvd) on CodePen.

Author: Martin van Driel;
Coded in: HTML, CSS;

#11 Loading Animation

See the Pen Loading Animation by loic (@loic_album) on CodePen.

Author: Ioic;
Coded in: HTML, CSS (SCSS);

#12 Pacman loading animation in one div

See the Pen Pacman loading animation in one div by Iddar Olivares (@iddar) on CodePen.

Author: Iddar Olivares;
Coded in: HTML, CSS (Less);

#13 Loading Animation CSS

See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1) on CodePen.

Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

Author: Cassidy Williams;
Coded in: HTML, CSS;

#15 Compose loading animation

See the Pen Compose loading animation by Brandon Mathis (@imathis) on CodePen.

Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);

#16 CSS Loading Animation

See the Pen CSS Loading Animation by John Urbank (@jurbank) on CodePen.

Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);

#17 Only CSS Loader – Wizard

See the Pen Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx) on CodePen.

Author: Guilmain Dorian;
Coded in: HTML (Pug), CSS (SCSS);

#18 Random geometric shapes loading animation

See the Pen Random geometric shapes loading animation by Tony Banik (@banik) on CodePen.

Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS;

#19 Canvas loading animation

See the Pen Canvas loading animation by Rachel Smith (@rachsmith) on CodePen.

Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;

#20 XBox SmartGlass Loading Animation

See the Pen XBox SmartGlass Loading Animation by Adam Argyle (@argyleink) on CodePen.

Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);

#21 Loading Animation MySensors

See the Pen Loading Animation MySensors by Edoardo (@edoardoo) on CodePen.

Author: Edoardo;
Coded in: HTML, CSS (SCSS);

#22 CSS Pancake Loader

See the Pen CSS Pancake Loader by Dario Corsi (@dariocorsi) on CodePen.

Author: Dario Corsi;
Coded in: HTML, CSS (SCSS);

#23 Loading Animation

See the Pen Loading Animation by John Heiner (@johnheiner) on CodePen.

Author: John Heiner;
Coded in: HTML, CSS (SCSS);

#24 Rotate / Pulse Loading Animation

See the Pen Rotate / Pulse Loading Animation by Colin Horn (@colinhorn) on CodePen.

Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;

#25 CSS Loading Animation

See the Pen CSS Loading Animation by Glen Cheney (@Vestride) on CodePen.

Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;

#26 Authentic Weather Loader

See the Pen Authentic Weather Loader by Tim Holman (@tholman) on CodePen.

Author: Tim Holman;
Coded in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

See the Pen Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel) on CodePen.

Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);

#28 CSS open store animation

See the Pen CSS open store animation by Mariana Beldi (@marianab) on CodePen.

Author: Mariana Beldi;
Coded in: HTML, CSS;

#29 CSS Loading Animation

See the Pen CSS Loading Animation by Ahmad Emran (@ahmadbassamemran) on CodePen.

Author: Ahmad Emran;
Coded in: HTML, CSS;

#30 Cat Loader

See the Pen #07animation: cat loader by Claudia (@eyesight) on CodePen.

Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);

#31 Button Loading Animation

See the Pen Button Loading Animation by Joshua Ward (@joshuaward) on CodePen.

Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

See the Pen Floating Loading Animation by Mario Duarte (@MarioDesigns) on CodePen.

Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);

#33 Organic Button

See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.

Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

See the Pen Switch loading animation by Aaron Iker (@aaroniker) on CodePen.

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#35 Download progress animation

See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#36 CSS3 Loading animations

See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

See the Pen CSS3 Loader & Spinners by Vineeth.TR (@vineethtrv) on CodePen.

Author: Vineeth.TR;
Coded in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

See the Pen [CSS] Cat loader by Rplus (@Rplus) on CodePen.

Author: Rplus;
Coded in: HTML (Pug), CSS (SCSS);

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Author: Vladislav Trefil;
Coded in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile) on CodePen.

Author: Jack Rugile;
Coded in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

Author: Dave McCarthy;
Coded in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

See the Pen Interactive Skate Loading by Aaron Iker (@aaroniker) on CodePen.

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

See the Pen Pikachu Loading Page by Hazem Ashraf (@Tetsu) on CodePen.

Author: Hazem Ashraf;
Coded in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

See the Pen Spinners using Font Icons by Keyamoon (@Keyamoon) on CodePen.

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

See the Pen TRON Spinner by simurai (@simurai) on CodePen.

Author: simurai;
Coded in: HTML, CSS (SCSS);

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

Author: Nicola Pressi;
Coded in: HTML (Haml), CSS (SCSS);

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

Author: Vallée Antoine;
Coded in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

See the Pen CSS3 Loading Spinner by Matthew Roelle (@Mattykins) on CodePen.

Author: Matthew Roelle;
Coded in: HTML (Haml), CSS (Sass);

How to add the JS & CSS loading animation to your website

Conclusion

Which loading animation did you like best? If you have also published a loading animation on codepens, please let me know so that I can expand this list! 🙂

Note: All buttons are all published on codepen.io and not by me.

Still not enough? Then this could be something for you: