Temani Afif

Posted on May 25, 2021 Edited on Aug 28, 2023

Another 100 CSS loaders for your next project

#html #css #beginners #webdev

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

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

Top comments (70)

manu • May 25 '21

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

But you didn't include this loader:

Temani Afif • May 25 '21

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 • May 25 '21

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 • May 25 '21

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 • May 25 '21 • Edited

Temani Afif • May 25 '21

good one, worth trying ;)

Mutahirhussain • May 28 '21

sir did u have a discord can i add u

manu • May 28 '21

ManuTheCoder#5821

Mutahirhussain • May 29 '21

sir i add u accept it

SaTy • Sep 28 '22

Respect you man!

🚩 Atul Prajapati 🇮🇳 • May 25 '21

I hope you are the master of loaders :)

Temani Afif • May 25 '21

only loaders ?? :p

🚩 Atul Prajapati 🇮🇳 • May 25 '21

sorry, entire www :)

Pascal Thormeier • May 25 '21

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

Temani Afif • May 25 '21

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

Luke Inglis • May 28 '21

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

GrahamTheDev • May 25 '21

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

Temani Afif • May 25 '21

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 • May 25 '21

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 • May 25 '21

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 • May 25 '21

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 • May 25 '21

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 • May 25 '21

🤣🤣🤣

Abdelghafor • May 27 '21 • Edited

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 • May 27 '21

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

Abdelghafor • May 27 '21

Cant't wait to see:(stole) 😁

Gustavo Scarpim • May 25 '21

I'm your fan haha, congratulations on the work

Temani Afif • May 25 '21

thanks :)

Gustavo Scarpim • May 26 '21

Whats your GitHub?

Temani Afif • May 26 '21

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

Comment hidden by post author - thread only accessible via permalink

Mutahirhussain • May 28 '21

sir can u help about css

Temani Afif • May 28 '21

what kind of help are you looking for?

Mutahirhussain • May 28 '21

can u build a website for me

Temani Afif • May 28 '21

sorry but this is not a "help", it's a job request and unfortunately I don't have the time for it

Mutahirhussain • May 28 '21 • Edited

can u tell how can i make look like this how can i add download button in hover styles in css

Hamza Ghariani • May 26 '21

That’s awesome 👏
Can u do cards swapping css animation ?

Temani Afif • May 26 '21

can you show me an example?

Hamza Ghariani • May 26 '21

bit.ly/3vvmNY4 😅

Temani Afif • May 26 '21

ok, will keep it in mind for a future collection ;) stay tuned!

Peter • May 25 '21

You are amazing at making these! Where do you get your inspiration?

Temani Afif • May 25 '21

a pen, a paper and I try to mockup things :) (it's the hardest part by the way, coding them is easier). There are, of course, the many loaders I see everyday everywhere that give me some ideas too.

View full discussion (70 comments)

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