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

[Oli]

Wow.... Now I want to build a slow site to take advantage of some of these loaders. They are amazing! Not only in quality, but in quantity. How did you think of all these?

[鱼依藻常乐]

Amazing

[Temani Afif]

stop spamming the site with such comment. This behavior can get you a ban

[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

[Temani Afif]

I see no animation there ...

[Simon Aust]

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

[Around25]

real heroes don't wear capes 🤩 Awesome initiative (although it's impossible to pick a favorite 😆)! proceeding to tweet

[Sujan Rai]

Ben was Awesome

[Santo Khan]

creative animation designer

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

[Temani Afif]

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

[tangyiqwan]

This is dope!