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.
Coded with
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.
Coded with
HTML, CSS (SCSS)
#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.
Coded with
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.
#6 Material Design Spinner
See the Pen Material Design Spinner by Fran Pérez (@mrrocks)
on CodePen.
Coded with
HTML, CSS (SCSS)
#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.
Coded with
HTML (Haml), CSS (SCSS)
#9 Cube loading animation
See the Pen Cube loading animation by Paul Grant (@cssinate)
on CodePen.
Coded with
HTML, CSS (SCSS)
#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.
Coded with
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.
Coded with
HTML, CSS (Less)
#13 Loading Animation CSS
See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1)
on CodePen.
Coded with
HTML, CSS (SCSS)
#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.
Coded with
HTML, CSS (SCSS)
#16 CSS Loading Animation
See the Pen CSS Loading Animation by John Urbank (@jurbank)
on CodePen.
Coded with
HTML (Haml), CSS (Sass)
#17 Only CSS Loader – Wizard
See the Pen Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx)
on CodePen.
Coded with
HTML (Pug), CSS (SCSS)
#18 Random geometric shapes loading animation
See the Pen Random geometric shapes loading animation by Tony Banik (@banik)
on CodePen.
Coded with
HTML (Slim), CSS (SCSS), JS
#19 Canvas loading animation
See the Pen Canvas loading animation by Rachel Smith (@rachsmith)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#20 XBox SmartGlass Loading Animation
See the Pen XBox SmartGlass Loading Animation by Adam Argyle (@argyleink)
on CodePen.
Coded with
HTML (Pug), CSS (Stylus)
#21 Loading Animation MySensors
See the Pen Loading Animation MySensors by Edoardo (@edoardoo)
on CodePen.
Coded with
HTML, CSS (SCSS)
#22 CSS Pancake Loader
See the Pen CSS Pancake Loader by Dario Corsi (@dariocorsi)
on CodePen.
Coded with
HTML, CSS (SCSS)
#23 Loading Animation
See the Pen Loading Animation by John Heiner (@johnheiner)
on CodePen.
Coded with
HTML, CSS (SCSS)
#24 Rotate / Pulse Loading Animation
See the Pen Rotate / Pulse Loading Animation by Colin Horn (@colinhorn)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#25 CSS Loading Animation
See the Pen CSS Loading Animation by Glen Cheney (@Vestride)
on CodePen.
Coded with
HTML (Haml), CSS (SCSS), JS
#26 Authentic Weather Loader
See the Pen Authentic Weather Loader by Tim Holman (@tholman)
on CodePen.
Coded with
HTML, CSS (SCSS)
#27 Loading Animation with Morphing SVG
See the Pen Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel)
on CodePen.
Coded with
HTML, CSS (SCSS)
#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.
Coded with
HTML, CSS (SCSS), JS (TweenMax.js)
See the Pen Button Loading Animation by Joshua Ward (@joshuaward)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
#32 Floating Loading Animation
See the Pen Floating Loading Animation by Mario Duarte (@MarioDesigns)
on CodePen.
Coded with
HTML, CSS (SCSS)
See the Pen Organic Button by Rik Schennink (@rikschennink)
on CodePen.
Coded with
HTML, CSS (SCSS), JS
#34 Switch loading animation
See the Pen Switch loading animation by Aaron Iker (@aaroniker)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (jQuery)
#35 Download progress animation
See the Pen Download progress animation by Aaron Iker (@aaroniker)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (GSAP)
#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.
Coded with
HTML (Pug), CSS (SCSS)
See the Pen Download Button Animation by Aaron Iker (@aaroniker)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (GSAP)
#39 Cat loader
See the Pen [CSS] Cat loader by Rplus (@Rplus)
on CodePen.
Coded with
HTML (Pug), CSS (SCSS)
#40 Loading
See the Pen Loading by Vladislav Trefil (@v_trefil)
on CodePen.
Coded with
HTML (Pug), CSS (Sass), JS (jQuery)
#41 Glitch Loading Indicator
See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile)
on CodePen.
Coded with
HTML, CSS, JS (jQuery, lettering.js)
#42 Colored Loader
See the Pen Untitled by Dave McCarthy (@AsLittleDesign)
on CodePen.
Coded with
HTML (Haml), CSS (Sass)
#43 Interactive Skate Loading
See the Pen Interactive Skate Loading by Aaron Iker (@aaroniker)
on CodePen.
Coded with
HTML, CSS (SCSS), JS (GSAP)
#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.
Coded with
HTML, CSS, JS (jQuery)
#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.
Coded with
HTML, CSS (SCSS)
#48 SpinKit
See the Pen SpinKit by Nicola Pressi (@ibanez182)
on CodePen.
Coded with
HTML (Haml), CSS (SCSS)
#49 Loader
See the Pen Loader by Vallée Antoine (@Antoine-360pixel)
on CodePen.
Coded with
HTML, CSS (SCSS)
#50 CSS3 Loading Spinner
See the Pen CSS3 Loading Spinner by Matthew Roelle (@Mattykins)
on CodePen.
Coded with
HTML (Haml), CSS (Sass)
#51 Loading animation by Kayleigh
See the Pen Loading animation by Kayleigh Foley (@kayfo23)
on CodePen.
Coded with
HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js)
#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:
Nice animations! Consider using some of the loading spinners from https://onedivloaders.vercel.app if you need more of these.