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

Earn money with your website or blog

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;

Earn money with your website or blog

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

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
Related Posts
Join the Conversation

9 Comments

Your email address will not be published.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you