I made 100 more CSS loaders for your next project

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!

Let's go!

---

Also available online 👇

css-loaders.com

---

Table of content

• The Classic III
• The Dots III
• The Hypnotic II
• The Bars II
• The Spinner III
• The Dots vs The Bars
• The Nature
• The Time
• The Shapes III
• The Hungry
• The Discord
• The Ben

---

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:

100 more underline/overlay animations | The upgraded CSS collection 🥇🥈🥉

Temani Afif ・ Apr 15 '21

#css #webdev #beginners #codepen

Comments

[Temani Afif]

@ben I hope you don't mind being part of my collection 😋

[spO0q]

first!

arf no ^^

[Temani Afif]

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

[Peter]

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

[Temani Afif]

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.

[Peter]

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

[GrahamTheDev]

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

[Temani Afif]

let's see how many Smartphone I will break 😝

[GrahamTheDev]

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)

[Temani Afif]

maybe it's time to change your 2000's PC 😋

[GrahamTheDev]

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?

[Habdul Hazeez]

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

[GrahamTheDev]

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 😂

[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 😂

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

[Temani Afif]

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

[Habdul Hazeez]

Keep up the good work, just so you know, I included your work in my recent Twitter thread.

Habdul Hazeez

@ziizium

Here are 4 authors that will level up your CSS skills.

In no particular order:

09:45 AM - 31 May 2021

[Temani Afif]

thanks :) I ❤ that tweet ;)

[manu]

You are definitely the god of loaders.

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

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

[Temani Afif]

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

[manu]

Wait - You're making even more?

Here's discord #2 -

[Temani Afif]

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

[SouariKarim]

That is awsome , you saved lot of developpers time , thank you ,,😄

[Aleksei Berezkin]

Awesome job! Under what license do you publish this? Do you require attribution?

[Temani Afif]

The codepen licence apply (blog.codepen.io/documentation/lice...). Attrtibution is not required but It would be good to link back to this article to help people see the source and all the loaders options ;)

[Vladimir Klepov]

For a minute, I thought you made 100 webpack-css-loaders and was scared.