DEV Community

Cover image for css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)
Temani Afif
Temani Afif

Posted on • Edited on

css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

It's been a while but I finally did it. I collected all my CSS-only loaders into one unique place.


👉 css-loaders.com 👈


Around 580 loaders are made using only one element! The HTML is as simple as <div class="loader"></div>. Nothing more!

If you followed me, you probably know most of them but if you are new then go check what CSS can do. From the simple animations to the craziest ones, you will for sure find what you want. If you don't want any loaders, then simply enjoy some fancy CSS animations that are satisfying to watch.


More than 500?! It's too much! I don't have time 😤

No problem, I have the solution! Use the following link and I will pick a nice loader for you

random.css-loaders.com

If you don't like it, click on "get another CSS loader" and you will get another one. No need to navigate the whole website. Keep surprising yourself with random loaders until you get the perfect one.

You also have a unique link for each generated loader. You can easily share your favorite one with anyone!

How to get the link of a loader I saw inside the collection and not using the random generator?

It's easy! Let's suppose you are browsing "The shapes" loaders here: https://css-loaders.com/shapes/ and you liked the #20. The link will be: https://css-loaders.com/shapes/#l20 (it's a lowercase "L" not "I").

Share the link of your favorite one in the comment section 👇

The random feature and the link sharing use the :has() selector so it won't work well on Firefox for now. Consider another browser if you want to enjoy them.


I also wrote a lot of articles about creating single-element loaders. Good tutorials if you want to know some of my secret recipes 🤫

Build your CSS loader with only one div — The Dots

How to Create a CSS-Only Loader Using One Element

Single Element Loaders: The Spinner

Single Element Loaders: The Dots

Single Element Loaders: The Bars

Single Element Loaders: Going 3D!

How to create a CSS-only loader with one element

Subscribe to my RSS Feed if you don't want to miss my new CSS articles and don't forget to bookmark https://css-loaders.com/.

I won't stop making CSS loaders. The goal is, one day, to reach 1000 single-element loaders! 💪

Stay Tuned


buy me a coffee

OR

Become a patron

Top comments (9)

Collapse
 
madsstoumann profile image
Mads Stoumann

Nice! How on earth do you find the time to do all these?!

Collapse
 
afif profile image
Temani Afif

It's on Twitter (𝕏) so spread the word 👇

Collapse
 
abidullah786 profile image
ABIDULLAH786

Mind blowing sources.

Great work.

Collapse
 
ziizium profile image
Habdul Hazeez

I don't know what to say.

I'll just say Temani Afif.

Collapse
 
fridaycandours profile image
Friday candour

This is the most amazing css innovation I have seen in a long while, very impressive.

I like your deep sense of creativity and selflessness. You are a magician 😍.

Collapse
 
wakywayne profile image
wakywayne

The ice cream cone getting eaten is great

Collapse
 
mardeg profile image
Info Comment hidden by post author - thread only accessible via permalink
Mardeg

The one I like the best is an illusion of spinning (the balls each are just moving back and forth in a straight line) which looks good on either light or dark backgrounds, and you're welcome to add to your collection (CC0 so any usage/license is fine). Besides a DIV version (CSS+HTML) that page also has an SVG+SMIL and an SVG+CSS+SMIL version.

Collapse
 
artxe2 profile image
Yeom suyun

Your understanding of CSS is impressive, but your endless creativity is even more astonishing.

Collapse
 
dipanjan profile image
Dipanjan Ghosal

Its pretty good. If it had a search bar, it'd be perfect

Some comments have been hidden by the post's author - find out more