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
Author: Jon Kantner;
Coded in: HTML, CSS (SCSS), JS;
#2 Square in a circle – Loading Animation
Author: Ray;
Coded in: HTML, CSS (SCSS);
#3 Rainbow Loader
Author: Jack Rugile;
Coded in: HTML, CSS;
#4 CSS Text filling with water
Author: Lucas Bebber;
Coded in: HTML, CSS (SCSS);
#5 Single Element CSS-Only Absolute Center Overlay Spinner
Author: MattIn4D;
Coded in: HTML, CSS;
#6 Material Design Spinner
Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);
#7 Loading
Author: dissimulate;
Coded in: HTML, CSS;
#8 Cog loading animation
Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);
#9 Cube loading animation
Author: Paul Grant;
Coded in: HTML, CSS (SCSS);
#10 CSS loading animation 12
Author: Martin van Driel;
Coded in: HTML, CSS;
#11 Loading Animation
Author: Ioic;
Coded in: HTML, CSS (SCSS);
#12 Pacman loading animation in one div
Author: Iddar Olivares;
Coded in: HTML, CSS (Less);
#13 Loading Animation CSS
Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);
#14 CSS Dash Loader
Author: Cassidy Williams;
Coded in: HTML, CSS;
#15 Compose loading animation
Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);
#16 CSS Loading Animation
Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);
#17 Only CSS Loader – Wizard
Author: Guilmain Dorian;
Coded in: HTML (Pug), CSS (SCSS);
#18 Random geometric shapes loading animation
Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS;
#19 Canvas loading animation
Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;
#20 XBox SmartGlass Loading Animation
Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);
#21 Loading Animation MySensors
Author: Edoardo;
Coded in: HTML, CSS (SCSS);
#22 CSS Pancake Loader
Author: Dario Corsi;
Coded in: HTML, CSS (SCSS);
#23 Loading Animation
Author: John Heiner;
Coded in: HTML, CSS (SCSS);
#24 Rotate / Pulse Loading Animation
Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;
#25 CSS Loading Animation
Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;
#26 Authentic Weather Loader
Author: Tim Holman;
Coded in: HTML, CSS (SCSS);
#27 Loading Animation with Morphing SVG
Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);
#28 CSS open store animation
Author: Mariana Beldi;
Coded in: HTML, CSS;
#29
Author: Ahmad Emran;
Coded in: HTML, CSS;
#30 Cat Loader
Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);
#31 Button Loading Animation
Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#32 Floating Loading Animation
Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);
#33 Organic Button
Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;
#34 Switch loading animation
Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#35 Download progress animation
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:
What did you think of this post?


All content I provide completely free! If you want to support the costs for the operation and my time a little bit, you are welcome to donate me a small amount of your choice. Thanks! 💙
Donation-
Pingback: 10 awesome CSS Hamburger Menus - DEV Community
-
Pingback: 10 awesome CSS Hamburger Menus | WebTutorialOnline | Programming News | Software Development | Web Development
-
Pingback: 10 awesome CSS Hamburger Menus - Style Tricks
-
Pingback: 10 awesome CSS Hamburger Menus
-
Pingback: 25 brilliant 404 Pages with nice animations
-
Pingback: 35 cool CSS Buttons - with animations!
-
Pingback: JavaScript/Electron: How to force synchronously adding loading animation, calling function, and then removing animation? (unintentionally async) - The web development company
-
Pingback: 9 cool and inspiring CSS animations (Oddly satisfying!)
-
Pingback: Top 20 CSS Navigation Menus