DEV Community

Cover image for 60 CSS Loading Animations (where you like to wait! βŒ›πŸ˜Š)
webdeasy.de
webdeasy.de

Posted on • Edited on • Originally published at webdeasy.de

60 CSS Loading Animations (where you like to wait! βŒ›πŸ˜Š)

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)

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

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


➑️ See the rest of the buttons on my blog ❀️

Top comments (5)

Collapse
 
ovchinnikovdev profile image
Konstantin

Cool list!

Collapse
 
aa82851391 profile image
Avabucks

Nice work! Share this components on BoxCoding

Collapse
 
harshvats2000 profile image
HARSH VATS

Soo Coool!

Collapse
 
webdeasy profile image
webdeasy.de

Uhh, this one looks amazing! 🀩

Collapse
 
madza profile image
Madza

These are nice and creative 😍