60 CSS Loading Animations

Looking for creative and inspiring CSS Loaders to bridge website wait times? Our selection of the most innovative CSS Loading animations and Spinners is the perfect solution. Discover how these CSS Loader 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.

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.

#2 Square in a circle – Loading Animation

See the Pen Square in a circle – Loading Animation by Ray (@raymondyang) on CodePen.

#3 Rainbow Loader

See the Pen Rainbow Loader by Jack Rugile (@jackrugile) on CodePen.

#4 CSS Text filling with water

See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen.

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

#6 Material Design Spinner

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

#8 Cog loading animation

See the Pen Cog loading animation by Jamie Coulter (@jcoulterdesign) on CodePen.

#9 Cube loading animation

See the Pen Cube loading animation by Paul Grant (@cssinate) on CodePen.

#10 CSS loading animation 12

See the Pen CSS loading animation 12 by Martin van Driel (@martinvd) on CodePen.

#11 Loading Animation

See the Pen Loading Animation by loic (@loic_album) on CodePen.

#12 Pacman loading animation in one div

See the Pen Pacman loading animation in one div by Iddar Olivares (@iddar) on CodePen.

#13 Loading Animation CSS

See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1) on CodePen.

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

#15 Compose loading animation

See the Pen Compose loading animation by Brandon Mathis (@imathis) on CodePen.

#16 CSS Loading Animation

See the Pen CSS Loading Animation by John Urbank (@jurbank) on CodePen.

#17 Only CSS Loader – Wizard

See the Pen Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx) on CodePen.

#18 Random geometric shapes loading animation

See the Pen Random geometric shapes loading animation by Tony Banik (@banik) on CodePen.

#19 Canvas loading animation

See the Pen Canvas loading animation by Rachel Smith (@rachsmith) on CodePen.

#20 XBox SmartGlass Loading Animation

See the Pen XBox SmartGlass Loading Animation by Adam Argyle (@argyleink) on CodePen.

#21 Loading Animation MySensors

See the Pen Loading Animation MySensors by Edoardo (@edoardoo) on CodePen.

#22 CSS Pancake Loader

See the Pen CSS Pancake Loader by Dario Corsi (@dariocorsi) on CodePen.

#23 Loading Animation

See the Pen Loading Animation by John Heiner (@johnheiner) on CodePen.

#24 Rotate / Pulse Loading Animation

See the Pen Rotate / Pulse Loading Animation by Colin Horn (@colinhorn) on CodePen.

#25 CSS Loading Animation

See the Pen CSS Loading Animation by Glen Cheney (@Vestride) on CodePen.

#26 Authentic Weather Loader

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

#27 Loading Animation with Morphing SVG

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

#28 CSS open store animation

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

#29 CSS Loading Animation

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

#30 Cat Loader

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

#31 Button Loading Animation

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

#32 Floating Loading Animation

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

#33 Organic Button

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

#34 Switch loading animation

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

#35 Download progress animation

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

#36 CSS3 Loading animations

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

#37 CSS3 Loader & Spinners

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

#38 Download Button Animation

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

#39 Cat loader

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

#40 Loading

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

#41 Glitch Loading Indicator

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

#42 Colored Loader

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

#43 Interactive Skate Loading

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

#44 CSS Loading Animations

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

#45 Pikachu Loading Page

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

#46 Spinners using Font Icons

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

#47 TRON Spinner

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

#48 SpinKit

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

#49 Loader

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

#50 CSS3 Loading Spinner

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

#51 Loading animation by Kayleigh

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

#52 Loading animation by Mohamed

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

#53 HTML ve CSS ile Loading Animation | 10

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

#54 HTML ve CSS ile Loading Animation | 7

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

#55 HTML ve CSS ile Loading Animation | 8

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

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

#57 HTML ve CSS ile Loading Animation | 5

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

#58 HTML ve CSS ile Loading Animation | 4

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

#59 Flight Loading Animation

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

#60 Nvidia Loading Animation

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

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: