DEV Community

loading...
Cover image for I made 100 more CSS loaders for your next project

I made 100 more CSS loaders for your next project

afif profile image Temani Afif ・2 min read

not 100, not 200 but 300! Yes, a new collection and a total of 300 CSS loaders.

This time, I am going to rely on more elements to create the loaders ... No, I am joking 😜, still only one <div> per loader, nothing more!

PS: I wanted to make it clear that all what I am sharing is my own work done from scratch. It's not a listing of other people works. it's not a collection of CSS loaders picked from different places. I only share what I have done. To be used for free of course.

Let's go!


Table of content


The Classic III

The Dots III

The Hypnotic II

The Bars II

The Spinner III

The last spinner is detailed in a Stack Overflow answer I gave

The Dots vs The Bars

They start as friends but ...

To be continued ...

The Nature

The Time

The Shapes III

The Hungry

The Discord

Someone challenged me so I had to do it.

It's not a perfect replicate but close enough 😁

The Ben

A last one for the fun. I added a click handler to avoid the spoils. Click and wait until the end

A small joke to remind you that even if you use a loader, your website need to be fast πŸ˜‰ and yes Ben is done with pure CSS, I am not using any image. I know it's crazy...


That's it!

I hope you enjoyed this 3rd collection. If you want more don't forget to β€πŸ¦„! If you have some funny or crazy ideas of loaders you want me to do, leave a comment πŸ‘‡

I don't do only loaders if you want more fun:

Discussion (68)

Collapse
inhuofficial profile image
InHuOfficial • Edited

Fantastic as always - quick heads up for everyone dont try and view the CSS for β€œBen” on your phone - big crash if you do 😜🀣🀣

Collapse
afif profile image
Temani Afif Author

let's see how many Smartphone I will break 😝

Collapse
inhuofficial profile image
InHuOfficial

It is no wonder it crashed my phone, it took about 5 seconds to open on my PC! (while inline, works fine if you open as external pen)

Thread Thread
afif profile image
Temani Afif Author

maybe it's time to change your 2000's PC πŸ˜‹

Thread Thread
inhuofficial profile image
InHuOfficial

What you think anyone can buy a new PC at the moment? You do know there is a CPU shortage! 🀣

It is that bad that to spec a PC to the same spec as my current one would cost me Β£500 more than I paid for it....how stupid is that?

Collapse
ziizium profile image
Habdul Hazeez

It works fine in Chrome 90 for Android, and my device did not crash as I type this.

Collapse
inhuofficial profile image
InHuOfficial

Of course it works in Android, it’s only iOS and it’s crappy safari browser that can’t handle anything more complicated than 2+2 - half of the loaders don’t work either on iOS as they don’t support the CSS features.

Hence why iOS is my work phone and Android for personal!

Oh and the speed issue on PC was because I had Illustrator saving a massive file...so that is embarrassing πŸ˜‚

Collapse
tterb profile image
Brett Stevenson

It didn't totally crash my phone, but I did have to close and reopen my browser to leave this comment...
Please don't tell me not to try jumping off a bridge next πŸ˜‚

Collapse
jjranalli profile image
jj_ranalli • Edited

This is amazing!! Ever thought of making a Glitchy collection?

I'm thinking of Cyberpunk-ish glitch effects, but anything glitchy would be cool imo

Collapse
afif profile image
Temani Afif Author

Yes I am planning some glitch effect in the next collection ;) stay tuned! don't forget to follow to get notified when it will be released

Collapse
jjranalli profile image
jj_ranalli

Of course! One more thing comes to mind, ever thought of using Tailwindcss color classes to style your loaders? I ask this as I made a package (Nightwind) that automatically inverts them to create a dark theme. So in this case, you'd have dark-themed loaders for any TailwindCSS website

Not sure if this is something you'd be interested in, but I thought of telling you in case you'd like to experiment with it. (Feel free to reach out to discuss this! Happy to help out if I can)

Thread Thread
afif profile image
Temani Afif Author

not really, I am not a Tailwind fan. IMO, it's one of the worst Framework with his expensive CSS and classes that let people do simple things with complex code. You will notice that for the 1-color loaders I made there is always one value of color to change that will affect the whole loader so we don't really need tailwind for that, we can easily switch the color using an extra class or an inline CSS.

Thread Thread
jjranalli profile image
jj_ranalli

I think tailwind has improved a lot over time, but I also understand what you mean. Personally I think it’s a very subjective matter as there are good points that can be made on both sides.

Anyway keep up the great work! Your loaders are really cool ✨

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Petition to make The Ben the actual loader for Dev.to, lol. @ben

(Love the food and the hourglass, by the way!)

Idea: Create a site where you demo all of these at once.

Collapse
afif profile image
Temani Afif Author

I like the idea of the demo website ;) will plan this shortly

Collapse
bbernarddev profile image
Britanney Bernard

Thank you so much! I tried to add it on my site, it still doesn't work. as example. How can I solve it? Do you have any contacts? Any ideas, pals?

Collapse
afif profile image
Temani Afif Author

which one did you add? and how I can see it in the code?

Collapse
codemouse92 profile image
Jason C. McDonald

Your loaders are entertaining in and of themselves. Makes me wish my sites were slower. ;)

Collapse
derah profile image
Derah

Awesome animations, thanks!

Google.com/photos/about/
can you check out this site on your PC, how can I achieve that particular animation with CSS.

How I love how the pictures animate when I scroll

Collapse
afif profile image
Temani Afif Author

I see no animation there ...

Collapse
jmau111 profile image
Julien Maury

first!

arf no ^^

Collapse
afif profile image
Temani Afif Author

yes technically the first ;) I can confirm from the notification :p

Collapse
jmau111 profile image
Julien Maury

love the series, inspiring, you're really good at this.

Collapse
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›

You are definitely the god of loaders.

You've made 300 loaders so far! (3 posts)

Nice discord loader!!!!
haha liked the ben loader 😜

Collapse
afif profile image
Temani Afif Author

like you said "so far". Still didn't unleash all the CSS powers :p and I am still at one div per loader ;)

Collapse
manuthecoder profile image
Thread Thread
afif profile image
Temani Afif Author

yes of course, I will not stop at only 300 ;)
that loader is easier :p

Collapse
peterlunch profile image
Peter

Temani an another amazing set! How did you get so good at CSS, I'd love to read what you did to improve.

Collapse
afif profile image
Temani Afif Author

It's a lot of practise (and a lot of time on Stack Overflow). I invite you to start with these two articles:
dev.to/afif/all-you-need-to-know-a...
dev.to/afif/advanced-css-animation...
Most of what I am doing rely on background and animation and I am detailing a lot of stuff there.

I will be writing more in the future for sure.

Collapse
peterlunch profile image
Peter

Awesome thanks for the resources. They are going on today’s reading list.

Collapse
pablonax profile image
Pablo Discobar

Hey, cool job! Let's develop the community together. I wrote an article about free Flutter templates, if you have any products (not necessarily a flutter template) that you would like to share, please submit them on my website and I will add them to my article! - code.market/sign-up/


dev.to/pablonax/free-flutter-templ...

Collapse
siaust profile image
Simon Aust

So enjoyable to look at these and imagine how they're made. Thanks very much :)

Collapse
around25team profile image
Around25

real heroes don't wear capes 🀩 Awesome initiative (although it's impossible to pick a favorite πŸ˜†)! proceeding to tweet

Collapse
sznroe profile image
Sujan Rai

Ben was Awesome

Collapse
santokhan1999 profile image
Santo Khan

creative animation designer

Collapse
darkphoenix645 profile image
Nilanjan Mitra

You are such a lifesaver! I never liked making loaders for any of my projects, but now I can just use one of the three - FREAKING - hundred you made.
Seriously, how'd you make that many?

Collapse
afif profile image
Temani Afif Author

well, I like to challenge myself :) I initially started by making my first 100 collection: dev.to/afif/100-underline-overlay-... and then In my brain : "come one you can do even more". Here I am with more than 700 animations :) and more are coming soon ;)

Collapse
amajola_ profile image
Asimthande

Love these hey. I'll be using them soon

Collapse
balopina profile image
Daniela de Oliveira

Love this!!

Collapse
akshayvinod profile image
Akshay Vinod

Appreciate your effort broπŸ‘

Collapse
bofcarbon1 profile image
Brian Quinn

Fantastic! I like the old fashioned hour glass. Just out of curiosity would the sand moving from top to bottom show progress?

Collapse
afif profile image
Temani Afif Author

You can make it that way but my intention was to consider an infinite animation no matter the progress.

Collapse
johnfrades profile image
John Frades

Holy shit you're awesome man!

Collapse
z2lai profile image
z2lai

I love the nature and time ones, your creativity is limitless! Also, well done on the Discord challenge.

Collapse
sensei85 profile image
Kent Agbottah Wisdom

Very very nice, My favorite is "The Ben"

Collapse
loriick profile image
Travailleur Lorick

Nice project very amazing

Collapse
dankamn profile image
DANKAMN

Bro you are so good at this I just began website development like a month ago
Can you show me how you learnt these animations.
Thanks

Collapse
afif profile image
Temani Afif Author

I have been doing CSS for at least 4 years now so this is the result of a long run work. It's not just one or two courses I have read so I cannot really show you something. I can only advise you to keep learning and since you are at the beginning start with the basics first before trying to tweak with complex animations.

Collapse
mardix profile image
Mardix

Awesome awesome awesome!

Collapse
rjitsu profile image
Rishav Jadon

They are very unique!

Collapse
murtukov profile image
Timur Murtukov

You are crazy! Stop it :D

Collapse
afif profile image
Temani Afif Author

I can't πŸ˜†

Collapse
1ak31sha profile image
Lakeisha

i love the pizza one!

Collapse
alvaromontoro profile image
Alvaro Montoro

Amazing, as always πŸ¦„πŸ˜ŠπŸ˜

Collapse
dvtuan123 profile image
dvtuan123

thank

Collapse
afif profile image
Temani Afif Author

@ben I hope you don't mind being part of my collection πŸ˜‹

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

Forem Open with the Forem app