60 CSS Loading Animations

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

Author
Jon Kantner

Coded with
HTML, CSS (SCSS), JS

#2 Square in a circle – Loading Animation

Author
Ray

Coded with
HTML, CSS (SCSS)

#3 Rainbow Loader

Author
Jack Rugile

Coded with
HTML, CSS

#4 CSS Text filling with water

Author
Lucas Bebber

Coded with
HTML, CSS (SCSS)

#5 Single Element CSS-Only Absolute Center Overlay Spinner

Author
MattIn4D

Coded with
HTML, CSS

#6 Material Design Spinner

Author
Fran Pérez

Coded with
HTML, CSS (SCSS)

#7 Loading

Author
dissimulate

Coded with
HTML, CSS

#8 Cog loading animation

Author
Jamie Coulter

Coded with
HTML (Haml), CSS (SCSS)

#9 Cube loading animation

Author
Paul Grant

Coded with
HTML, CSS (SCSS)

#10 CSS loading animation 12

Author
Martin van Driel

Coded with
HTML, CSS

#11 Loading Animation

Author
Ioic

Coded with
HTML, CSS (SCSS)

#12 Pacman loading animation in one div

Author
Iddar Olivares

Coded with
HTML, CSS (Less)

#13 Loading Animation CSS

Author
Tatsuya Azegami

Coded with
HTML, CSS (SCSS)

#14 CSS Dash Loader

Author
Cassidy Williams

Coded with
HTML, CSS

#15 Compose loading animation

Author
Brandon Mathis

Coded with
HTML, CSS (SCSS)

#16 CSS Loading Animation

Author
John Urbank

Coded with
HTML (Haml), CSS (Sass)

#17 Only CSS Loader – Wizard

Author
Guilmain Dorian

Coded with
HTML (Pug), CSS (SCSS)

#18 Random geometric shapes loading animation

Author
Tony Banik

Coded with
HTML (Slim), CSS (SCSS), JS

#19 Canvas loading animation

Author
Rachel Smith

Coded with
HTML, CSS (SCSS), JS

#20 XBox SmartGlass Loading Animation

Author
Adam Argyle

Coded with
HTML (Pug), CSS (Stylus)

#21 Loading Animation MySensors

Author
Edoardo

Coded with
HTML, CSS (SCSS)

#22 CSS Pancake Loader

Author
Dario Corsi

Coded with
HTML, CSS (SCSS)

#23 Loading Animation

Author
John Heiner

Coded with
HTML, CSS (SCSS)

#24 Rotate / Pulse Loading Animation

Author
Colin Horn

Coded with
HTML, CSS (SCSS), JS

#25 CSS Loading Animation

Author
Glen Cheney

Coded with
HTML (Haml), CSS (SCSS), JS

#26 Authentic Weather Loader

Author
Tim Holman

Coded with
HTML, CSS (SCSS)

#27 Loading Animation with Morphing SVG

Author
Heather Buchel

Coded with
HTML, CSS (SCSS)

#28 CSS open store animation

Author
Mariana Beldi

Coded with
HTML, CSS

#29 CSS Loading Animation

Author
Ahmad Emran

Coded with
HTML, CSS

#30 Cat Loader

Author
Claudia

Coded with
HTML, CSS (SCSS), JS (TweenMax.js)

#31 Button Loading Animation

Author
Joshua Ward

Coded with
HTML, CSS (SCSS), JS (jQuery)

#32 Floating Loading Animation

Author
Mario Duarte

Coded with
HTML, CSS (SCSS)

#33 Organic Button

Author
Rik Schennink

Coded with
HTML, CSS (SCSS), JS

#34 Switch loading animation

Author
Aaron Iker

Coded with
HTML, CSS (SCSS), JS (jQuery)

#35 Download progress animation

Author
Aaron Iker

Coded with
HTML, CSS (SCSS), JS (GSAP)

#36 CSS3 Loading animations

Author
Manoz

Coded with
HTML, CSS

#37 CSS3 Loader & Spinners

Author
Vineeth.TR

Coded with
HTML (Pug), CSS (SCSS)

#38 Download Button Animation

Author
Aaron Iker

Coded with
HTML, CSS (SCSS), JS (GSAP)

#39 Cat loader

Author
Rplus

Coded with
HTML (Pug), CSS (SCSS)

#40 Loading

Author
Vladislav Trefil

Coded with
HTML (Pug), CSS (Sass), JS (jQuery)

#41 Glitch Loading Indicator

Author
Jack Rugile

Coded with
HTML, CSS, JS (jQuery, lettering.js)

#42 Colored Loader

Author
Dave McCarthy

Coded with
HTML (Haml), CSS (Sass)

#43 Interactive Skate Loading

Author
Aaron Iker

Coded with
HTML, CSS (SCSS), JS (GSAP)

#44 CSS Loading Animations

Author
Alex

Coded with
HTML, CSS

#45 Pikachu Loading Page

Author
Hazem Ashraf

Coded with
HTML, CSS, JS (jQuery)

#46 Spinners using Font Icons

Author
Keyamoon

Coded with
HTML, CSS

#47 TRON Spinner

Author
simurai

Coded with
HTML, CSS (SCSS)

#48 SpinKit

Author
Nicola Pressi

Coded with
HTML (Haml), CSS (SCSS)

#49 Loader

Author
Vallée Antoine

Coded with
HTML, CSS (SCSS)

#50 CSS3 Loading Spinner

Author
Matthew Roelle

Coded with
HTML (Haml), CSS (Sass)

#51 Loading animation by Kayleigh

Author
Kayleigh Foley

Coded with
HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js)

#52 Loading animation by Mohamed

Author
Mohamed Yousef

Coded with
HTML, CSS

#53 HTML ve CSS ile Loading Animation | 10

Author
1kodum

Coded with
HTML, CSS

#54 HTML ve CSS ile Loading Animation | 7

Author
1kodum

Coded with
HTML, CSS

#55 HTML ve CSS ile Loading Animation | 8

Author
1kodum

Coded with
HTML, CSS

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

Author
1kodum

Coded with
HTML, CSS

#57 HTML ve CSS ile Loading Animation | 5

Author
1kodum

Coded with
HTML, CSS

#58 HTML ve CSS ile Loading Animation | 4

Author
1kodum

Coded with
HTML, CSS

#59 Flight Loading Animation

Author
Dinesh Basnet

Coded with
HTML, CSS

#60 Nvidia Loading Animation

Author
gambhirsharma

Coded with
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:

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. Required fields are marked *

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

This can also interest you