50 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

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

Earn money with your website or blog

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

Earn money with your website or blog

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 CSS Loading Animation

Author: Ahmad Emran;
Coded in: HTML, CSS;

#30 Cat Loader

Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);

Improve user experience and earn money at the same time?

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

#36 CSS3 Loading animations

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

Author: Vineeth.TR;
Coded in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

Author: Rplus;
Coded in: HTML (Pug), CSS (SCSS);

#40 Loading

Author: Vladislav Trefil;
Coded in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

Author: Jack Rugile;
Coded in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

Author: Dave McCarthy;
Coded in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

Author: Hazem Ashraf;
Coded in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

Author: simurai;
Coded in: HTML, CSS (SCSS);

#48 SpinKit

Author: Nicola Pressi;
Coded in: HTML (Haml), CSS (SCSS);

#49 Loader

Author: Vallée Antoine;
Coded in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

Author: Matthew Roelle;
Coded in: HTML (Haml), CSS (Sass);

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:

Related Posts
Join the Conversation

11 Comments

  1. karrid1 says:

    Nice animations! Consider using some of the loading spinners from https://onedivloaders.vercel.app if you need more of these.

Your email address will not be published.

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

This can also interest you