Another 100 CSS loaders for your next project

Ready for the second set of loaders? Yes, it's again me with another collection of 100 CSS loaders. Now you have a total of 200 different loaders!

Like the previous one, only one <div> per loader.

Happy loading! 🙃

---

Also available online 👇

css-loaders.com

---

Table of content

• The Classic II
• The Dots II
• The Hypnotic
• The Spinner II
• The Shuriken
• The Progress II
• The Flipping
• The Wobbling II
• The Shapes II
• The Arcade

---

The Classic II

The Dots II

The Hypnotic

The Spinner II

The Shuriken

Even "Ninja" Developers need loaders 😉

The Progress II

The Flipping

The Wobbling II

The Shapes II

The Arcade

---

That's it!

See you next collection. Yes, there will be another collection with more fancy loaders so stay tuned and don't forget to ❤🦄 This one!

Until then I invite you to check some of my old collections:

Another 100 underline/overlay animations | The extended CSS collection 🥇🥈

Temani Afif ・ Mar 30 '21

#css #beginners #webdev #codepen

Comments

[manu]

You. Are. So. Good. At. CSS!

But you didn't include this loader:

[Temani Afif]

If you talk about the cat, then it's inside the Pokeball :p and for the loader above it, maybe you will see it in the next collection ;)

[manu]

nice.
Looking forward to it haha :D

I would challenge you to make a discord loader.... it's kinda hard and i think you will make it because you are good at css....

[Temani Afif]

show me a gif or give me a link where I can see the loader (I am not used to work with discord) and I will probably do it ;)

[manu]

[Temani Afif]

good one, worth trying ;)

[Mutahirhussain]

sir did u have a discord can i add u

[manu]

ManuTheCoder#5821

[Mutahirhussain]

sir i add u accept it

[SaTy]

Respect you man!

[🚩 Atul Prajapati 🇮🇳]

I hope you are the master of loaders :)

[Temani Afif]

only loaders ?? :p

[🚩 Atul Prajapati 🇮🇳]

sorry, entire www :)

[Abdelghafor]

Those CSS loaders are just awesome, mmmm . . . ! But, I hope that you include In the next collection an atome with an nucleus inside and electrons around like those in The Wobblind II, something like react logo.
So you are from Tunisia, I'm from morroco, happy to see you here with this wonderful job 😉.

[Temani Afif]

ok noted ;) you will see it in a future collection !

[Abdelghafor]

Cant't wait to see:(stole) 😁

[GrahamTheDev]

All these great and complex loaders and I love the 2nd one in "The Dots II", one I have officially stolen 😋

[Temani Afif]

do but please don't remove the CSS from it and make it a multi-frame image that you load using Ajax calls hidden inside the HTTP headers 🙏

[GrahamTheDev]

Damn it, you know me too well now, I guess I will use this new fangled CSS stuff.

Maybe I could build it using TailWind, I am sure that would make you happy 😂

[Temani Afif]

It would be a bit tricky using tailwind. You need to first build a JS plugin to extend the framework classes then

<div class="dots-3-2 animation-duration-2s animation-ease-linear">
  <span class="dot1 moving-to-top after-1s then-move-back-to-bottom"></span>
  <span class="dot2 moving-to-bottom immediately"></span>
  <span class="dot3 moving-to-bottom wait-until-dot1-reach-the-top then move-back-to-top"></span>
  <span class="dot4 do-nothing its-a-3-dots-animation "></span>
</div>

Even the browser will show in the console "come one man, I cannot do this !!" 🤣🤣

[GrahamTheDev]

you missed dot-is-black dot-is-12px dot-is-round dot-must-not-be-square dot-dot-is-on-white dot-has-no-clue-how-to-do-its-taxes on each span....get with the program!

[Temani Afif]

shame on me 😟 missed half the classes ... we can probably optimize the styling classes and add them to the parent element for more scalability all-dots-are-back-but-make-transparent-the-extra-ones all-dots-are-12px all-dots-are-round will-handle-the-taxes-for-my-dots

[GrahamTheDev]

🤣🤣🤣

[Gustavo Scarpim]

I'm your fan haha, congratulations on the work

[Temani Afif]

thanks :)

[Gustavo Scarpim]

Whats your GitHub?

[Temani Afif]

my github is empty, you will find nothing there :)

[Pascal Thormeier]

Definitely saving this one for the future! Coming up with awesome loaders is so hard. Thank you so much for this!

[Temani Afif]

you're welcome ;) and yes it's not that easy to create things. It's 90% thinking and 10% coding.

[Luke Inglis]

Given the support for animation in CSS these days I'm surprised it's not 95% / 5% 😉

[Aleksandr Hovhannisyan]

These are incredible! Love the pokeball.

[Przemyslaw Michalak]

Amazing project. I looked around it and I found your Twitter and website, You should definitely include them in your blogs.
I guess project like this causing you to constantly update your website. It happens that I'm creator of the front-end Studio that is a hybrid between low-code and 'full-code' experience. Have a look at my blogs, and let me know if I could be any help for you in your project.

[pawan941394]

hello sir can i use this my startup website.

[Temani Afif]

yes of course :) and you can drop a link here so I can see the result ;)

[pawan941394]

thanks for the reply sir i will be share you link after done😍