DEV Community

Cover image for Another 100 CSS loaders for your next project
Temani Afif
Temani Afif

Posted on • Updated on

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

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:

Top comments (70)

Collapse
 
__manucodes profile image
manu

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

But you didn't include this loader:
Loading Cat GIF - Loading Cat Thinking - Discover & Share GIFs

Collapse
 
afif profile image
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 ;)

Collapse
 
__manucodes profile image
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....

Thread Thread
 
afif profile image
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 ;)

Thread Thread
 
__manucodes profile image
manu • Edited

Discord Spin GIF | Gfycat
Discord Loading Gif - Album on Imgur

Thread Thread
 
afif profile image
Temani Afif

good one, worth trying ;)

Collapse
 
brokenangke900 profile image
Mutahirhussain

sir did u have a discord can i add u

Thread Thread
 
__manucodes profile image
manu

ManuTheCoder#5821

Thread Thread
 
brokenangke900 profile image
Mutahirhussain

sir i add u accept it

Collapse
 
mengtongun profile image
SaTy

Respect you man!

img.gif

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

I hope you are the master of loaders :)

Master

Collapse
 
afif profile image
Temani Afif

only loaders ?? :p

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

sorry, entire www :)

Collapse
 
abdelghaforaz profile image
Abdelghafor • 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 😉.

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
abdelghaforaz profile image
Abdelghafor

Cant't wait to see:(stole) 😁

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
afif profile image
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 🙏

Collapse
 
grahamthedev profile image
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 😂

Thread Thread
 
afif profile image
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>
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
 
grahamthedev profile image
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!

Thread Thread
 
afif profile image
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

Thread Thread
 
grahamthedev profile image
GrahamTheDev

🤣🤣🤣

Collapse
 
guscarpim profile image
Gustavo Scarpim

I'm your fan haha, congratulations on the work

Collapse
 
afif profile image
Temani Afif

thanks :)

Collapse
 
guscarpim profile image
Gustavo Scarpim

Whats your GitHub?

Thread Thread
 
afif profile image
Temani Afif

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

Collapse
 
thormeier profile image
Pascal Thormeier

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

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
ludamillion profile image
Luke Inglis

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

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

These are incredible! Love the pokeball.

Collapse
 
przemek profile image
Info Comment hidden by post author - thread only accessible via permalink
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.

Collapse
 
pawan941394 profile image
pawan941394

hello sir can i use this my startup website.

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
pawan941394 profile image
pawan941394

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

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