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.