25 inspiring loading animations (CSS and JavaScript)

25 inspiring loading animations (CSS and JavaScript) Thumbnail
Published on 30. October 2020

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!

Advertisement

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

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.

Advertisement

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.

Advertisement

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.

Advertisement

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.

Advertisement

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.

Advertisement

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.

Advertisement

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;

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.

Related Posts
Leave a comment

Your email address will not be published. Required fields are marked *