35 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

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);

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: