DEV Community

Cover image for Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆
Temani Afif
Temani Afif

Posted on Edited on

Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆

500 single element CSS loaders. Pure CSS loaders with only one div. The biggest collection of loading animation using only CSS.

500 loaders

Ok, ok, let's stop this introduction and move to the real fun 😜


Also available online 👇

css-loaders.com


Table of content


The Thin

The Colorful II

The Dots V

The Line II

The Cut

The Arrow

The Shapes IV

The Clones II

The Blob

The Fullscreen

Some people also like fullscreen loaders 😉


This is not the end

500 CSS loaders is a good milestone but I will not stop there. I won't say more so stay tuned for next collection!

I'll be back


In the meantime, check the last underline/overlay collection

Top comments (33)

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
grahamthedev profile image
GrahamTheDev • • Edited

I really wish I built things that were slow enough to need a loader (sir humblebrag has arrived! 😋🤣)...just so I could use some of these!

When you get to 1000 are you planning on building a site dedicated to loaders (with a "copy to clipboard" functionality)? As that would be an awesome resource!

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
afif profile image
Temani Afif •

maybe it's already in progress .. oops, did I say this out loud 😛

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
grahamthedev profile image
GrahamTheDev • • Edited

I'm glad, I can imagine it being a really good resource and when I do need a loader you know I am a fan of the simple dots ones!

Are you planning on making it so you can pick a colour (colours), change speeds etc? (Sorry might be giving too much away 😋)

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
afif profile image
Temani Afif •

Sorry I cannot say more, this interview is over ...
[me wearing my sunglass and jumping into my limousine hunted by the journalists 🏃🏻‍♀️ 🏃🏻🏃🏻‍♀️ 🏃🏻 ...]

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
grahamthedev profile image
GrahamTheDev • • Edited

And now the conspiracy theorists will be all over you, hounding you day and night for walking out on the interview.

Is Temani an alien? (it would explain his CSS skills being beyond those of mere humans)

Does he know where the bodies are buried?

Why was there a limousine waiting for him outside a McDonalds (and why does he always insist on having interviews at McDonalds?) and how on earth did they get the limo through the drive-through?

For this and more answers to questions you didn't even think to ask subscribe to buzzfeed!

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
afif profile image
Temani Afif • • Edited

XX: InHuOfficial is disturbing the Boss. He might find our secret. Send the Xantorus
YY: The Xantorus! are you sure?
XX: Yes!!
The Xantorus: ⊑⟒⌰⌰⍜ ỻ⎍⋔⏃⋏⌇


MBC News: last night a mysterious flash was seen by many people.
people: It was a huge blue light coming from the sky! it was scray. It only lasted few seconds then its gone!
The Nasa: don't worry, this a known phenomenom that happen each 112 years due to [ ... ]
The Nasa to the army: Yes it's again Afif playing with his Xantorus but everything is under control now.
The army to Biden: no, it was only one person this time. We will erase all the related document as usual.

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
grahamthedev profile image
GrahamTheDev •

Official Statement from InHu:

"Temani is a human human who does human things. I was wrong to even suggest he is not a human with human body.

The human Temani has forgiven me for suggesting his human skills are anything other than human and I apologise to my fellow humans for any confusion caused.

Thank you."

mic accidentally left on - No put down the blaster, I did as you asked....what the hell is that? A tentacle? where are you going to put that...no...no not in my a😨

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
afif profile image
Temani Afif •

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026 Thread
 
grahamthedev profile image
GrahamTheDev •

🤣🤣 anyway, I look forward to the site when it is done, I have learned my lesson, no more questions 😋

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
z2lai profile image
z2lai •

This guy knows what the people want before they want it. The spirit of Steve Jobs lives within him.

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
xilam675 profile image
xilam675 •

awesome bro

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
drnguyen profile image
NGUYỄN ĐỊCH LONG •

I think there is a loader that you can sell to Mitsubishi in The cut collection above lol. There's a lot of work here. Amazing.

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
itscasey profile image
Casey 💎 •

I'm totally going to use the Blob ones - so cool!

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
ronaldohoch profile image
Ronaldo Hoch •

Completely awesome the blob loaders!
How the gooey effect works with just css? Can you write about it?

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
afif profile image
Temani Afif •

Yes, I am planning to write posts to explain some of the effect I have done but the trick behind the gooey is the filter. (blur + contrast) and some specific colors. Stay tuned for a full article to better understand ;)

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
ronaldohoch profile image
Ronaldo Hoch •

Niice! Thank you :D

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
kishansomaiya profile image
Kishan Somaiya •

Amazing dude!!

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
z2lai profile image
z2lai •

The Clones 2 is so neat and satisfying, I can see users wishing the loading time was longer just to stare at those animations!

The fullscreen loaders on the other hand...

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
warakateng profile image
Warakateng •

Soo much loaders I'm getting overloaded.😅

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
victormagarlamov profile image
Victor Magarlamov •

Hahaha! It's really great! Thanks!

⚽ Live Match: afif/adding css loaders to the collection of css loaders ap - Info Live Streaming 2026
 
mukuljainx profile image
Mukul Jain •

It's really fascinating that one person building so many amazing CSS loader each week for everyone's need!

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