60 inspiring Loading Animations (CSS and JavaScript)

Looking for creative and inspiring CSS loading animations to bridge website wait times? Our selection of the most innovative CSS spinners is the perfect solution. Discover how these loading animations can enhance your web applications and keep your users engaged with seamless loading experiences.

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

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.

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.

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.

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.

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.

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.

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;

#26 Authentic Weather Loader

See the Pen Authentic Weather Loader by Tim Holman (@tholman) on CodePen.

Author: Tim Holman;
Coded in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

See the Pen Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel) on CodePen.

Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);

#28 CSS open store animation

See the Pen CSS open store animation by Mariana Beldi (@marianab) on CodePen.

Author: Mariana Beldi;
Coded in: HTML, CSS;

#29 CSS Loading Animation

See the Pen CSS Loading Animation by Ahmad Emran (@ahmadbassamemran) on CodePen.

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

#30 Cat Loader

See the Pen #07animation: cat loader by Claudia (@eyesight) on CodePen.

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

#31 Button Loading Animation

See the Pen Button Loading Animation by Joshua Ward (@joshuaward) on CodePen.

Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

See the Pen Floating Loading Animation by Mario Duarte (@MarioDesigns) on CodePen.

Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);

#33 Organic Button

See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.

Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

See the Pen Switch loading animation by Aaron Iker (@aaroniker) on CodePen.

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

#35 Download progress animation

See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.

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

#36 CSS3 Loading animations

See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

See the Pen CSS3 Loader & Spinners by Vineeth.TR (@vineethtrv) on CodePen.

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

#38 Download Button Animation

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

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

#39 Cat loader

See the Pen [CSS] Cat loader by Rplus (@Rplus) on CodePen.

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

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

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

#41 Glitch Loading Indicator

See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile) on CodePen.

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

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

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

#43 Interactive Skate Loading

See the Pen Interactive Skate Loading by Aaron Iker (@aaroniker) on CodePen.

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

#44 CSS Loading Animations

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

See the Pen Pikachu Loading Page by Hazem Ashraf (@Tetsu) on CodePen.

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

#46 Spinners using Font Icons

See the Pen Spinners using Font Icons by Keyamoon (@Keyamoon) on CodePen.

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

See the Pen TRON Spinner by simurai (@simurai) on CodePen.

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

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

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

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

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

#50 CSS3 Loading Spinner

See the Pen CSS3 Loading Spinner by Matthew Roelle (@Mattykins) on CodePen.

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

#51 Loading animation by Kayleigh

See the Pen Loading animation by Kayleigh Foley (@kayfo23) on CodePen.

Author: Kayleigh Foley;
Coded in: HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js);

#52 Loading animation by Mohamed

See the Pen Loading Animation by Mohamed Yousef (@Freeps2) on CodePen.

Author: Mohamed Yousef;
Coded in: HTML, CSS;

#53 HTML ve CSS ile Loading Animation | 10

See the Pen HTML ve CSS ile Loading Animation | 10 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#54 HTML ve CSS ile Loading Animation | 7

See the Pen HTML ve CSS ile Loading Animation | 7 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#55 HTML ve CSS ile Loading Animation | 8

See the Pen HTML ve CSS ile Loading Animation | 8 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

See the Pen HTML ve CSS ile Loading Animation Tasarlama | 2 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#57 HTML ve CSS ile Loading Animation | 5

See the Pen HTML ve CSS ile Loading Animation | 5 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#58 HTML ve CSS ile Loading Animation | 4

See the Pen HTML ve CSS ile Loading Animation | 4 by 1kodum (@1kodum) on CodePen.

Author: 1kodum;
Coded in: HTML, CSS;

#59 Flight Loading Animation

See the Pen Flight Loading Animation by Dinesh Basnet (@iamdineshbasnet) on CodePen.

Author: Dinesh Basnet;
Coded in: HTML, CSS;

#60 Nvidia Loading Animation

See the Pen Nvidia Loading Animation by gambhirsharma (@gambhirsharma) on CodePen.

Author: gambhirsharma;
Coded in: HTML, CSS;

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: