DEV Community

Cover image for Adding 100 CSS loaders to the collection of β€” 500 CSS loaders πŸ†
Temani Afif
Temani Afif

Posted on • Updated 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

Latest comments (33)

Collapse
 
xilam675 profile image
xilam675

awesome bro

Collapse
 
ifierygod profile image
Goran Kortjie

Soo much loaders I'm getting overloaded.πŸ˜…

Collapse
 
kathybowing profile image
Kathy Bowing

Nice work!

Collapse
 
luisgustavoj profile image
Luis Silva

Mannnn this is so useful, i was looking for that my entire life and in the first day on dev.to i found it 🀣 good job!

Collapse
 
ayushshah profile image
Ayush Shah

It looks so cool.
Appreciate the ounce of energy you poured into creating all these cool and awesome loaders
Any references (CSS animations) to create something as amazing as these loaders?

Collapse
 
afif profile image
Temani Afif

I don't really have any particular reference. It's years of experience and practice so the only reference I can give is to learn the basics and practise as much as possible and you will become better each day.

Collapse
 
jailiton profile image
jailiton

Hello, thx for this post. It is really good. nice!

Collapse
 
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.

Collapse
 
bubbzdotdev profile image
Chris Blount

Great work! Loving this series. Excited to see what else you have in store.

Collapse
 
victormagarlamov profile image
Victor Magarlamov

Hahaha! It's really great! Thanks!

Collapse
 
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...

Collapse
 
kishansomaiya profile image
Kishan Somaiya

Amazing dude!!

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

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

Collapse
 
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 ;)

Collapse
 
ronaldohoch profile image
Ronaldo Hoch

Niice! Thank you :D

Collapse
 
jstvikrant profile image
Vikrant

Blobs and dots are very funny, fun to watch them continuously. Grate work as before.

Collapse
 
itscasey profile image
Casey πŸ’Ž

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

Collapse
 
iamray profile image
Raymond

This is very awesome! I love the css loaders thanks for sharing Temani.

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