DEV Community

loading...
Cover image for 25 awesome Loading Animations where you like to wait! 
βŒ›πŸ˜Š

25 awesome Loading Animations where you like to wait! βŒ›πŸ˜Š

webdeasy profile image WebDEasy Originally published at webdeasy.de ・4 min read

Originally published on webdeasy.de.

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!

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)

Psst! Stay up to date and subscribe to my newsletter! πŸ“¬

#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.

Discussion

pic
Editor guide
Collapse
shadowscientist profile image
Shadow Scientist

I made one recently.
Hope you like it. :)

Collapse
webdeasy profile image
WebDEasy Author

Uhh, this one looks amazing! 🀩

Collapse
barrbozzo profile image
Constantine

Cool list!

Collapse
harshvats2000 profile image
HARSH VATS

Soo Coool!

Collapse
madza profile image
Madza

These are nice and creative 😍