The use of loading animations is ideal for bridging waiting times on websites and in web applications. Here you will find a selection of the most creative and inspiring loading animations!
Updated version is available (click)! 🔥
Since the functionality and appearance of animations can be significantly improved by JavaScript, some come with JavaScript.
If you like a loading animation, you can simply copy&paste. 🙂 (Licensing)
#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;
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! 🙂
Still not enough? Then this could be something for you!
Note: All buttons are all published on codepen.io and not by me.
Oldest comments (5)
These are nice and creative 😍
Cool list!
Uhh, this one looks amazing! 🤩
Soo Coool!
Nice work! Share this components on BoxCoding