DEV Community

loading...
Cover image for Another 100 CSS loaders for your next project

Another 100 CSS loaders for your next project

Temani Afif
Another Dev guy who love hacking with CSS
・1 min read

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! πŸ™ƒ


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:

Discussion (70)

Collapse
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›

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 Author

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
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›

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 Author

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
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš› • Edited

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

Thread Thread
afif profile image
Temani Afif Author

good one, worth trying ;)

Collapse
brokenangke900 profile image
Mutahirhussain

sir did u have a discord can i add u

Thread Thread
manuthecoder profile image
π™ΌπšŠπš—πšžπšƒπš‘πšŽπ™²πš˜πšπšŽπš›

ManuTheCoder#5821

Thread Thread
brokenangke900 profile image
Mutahirhussain

sir i add u accept it

Collapse
atulcodex profile image
Atul Prajapati

I hope you are the master of loaders :)

Master

Collapse
afif profile image
Temani Afif Author

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 Author

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

Collapse
abdelghaforaz profile image
Abdelghafor

Cant't wait to see:(stole) 😁

Collapse
inhuofficial profile image
InHuOfficial

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 Author

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
inhuofficial profile image
InHuOfficial

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 Author

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
inhuofficial profile image
InHuOfficial

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 Author

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
inhuofficial profile image
InHuOfficial

🀣🀣🀣

Collapse
guscarpim profile image
Gustavo Scarpim

I'm your fan haha, congratulations on the work

Collapse
afif profile image
Temani Afif Author

thanks :)

Collapse
guscarpim profile image
Gustavo Scarpim

Whats your GitHub?

Thread Thread
afif profile image
Temani Afif Author

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 Author

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
peterlunch profile image
Peter

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

Collapse
afif profile image
Temani Afif Author

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.

Collapse
h4mzadevs profile image
Hamza Ghariani

That’s awesome πŸ‘
Can u do cards swapping css animation ?

Collapse
afif profile image
Temani Afif Author

can you show me an example?

Collapse
h4mzadevs profile image
Hamza Ghariani

bit.ly/3vvmNY4 πŸ˜…

Thread Thread
afif profile image
Temani Afif Author

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

Collapse
pawan941394 profile image
pawan941394

hello sir can i use this my startup website.

Collapse
afif profile image
Temani Afif Author

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😍

Collapse
jmau111 profile image
Julien Maury

skilled

Collapse
catniac profile image
catniac

Thanks for sharing this! it really helped me out hehe

Collapse
sandeshad100 profile image
sandeshad100

Keep sharing like this

Collapse
alanmaranto profile image
alanmaranto

Nice!
Do you have some loader related with music?

Collapse
afif profile image
Temani Afif Author

maybe in a future collection ;)

Collapse
sheriffderek profile image
sheriffderek

10 in "the flipping" is my favorite!

Collapse
panveel profile image
panveel

This is so awesome.

Collapse
diogoxiang profile image
Diogoxiang

very nice!

Collapse
z2lai profile image
z2lai • Edited

This is madness! Before you know it, you'll be building pure CSS loaders with academy award winning storylines!

Collapse
afif profile image
Temani Afif Author

Indeed, I try to keep a kind of sequencing between the series so it looks like I am telling a story :) and we are still at the beginning ;)

Collapse
prajwalmachado profile image
Prajwal Machado

really good job @afif

Collapse
hakymreality profile image
Hakymreality

You are so good at CSS, wow, good job man.

Collapse
andrewbaisden profile image
Andrew Baisden

Wow a lot of these are really good did you create them all?

Collapse
afif profile image
Temani Afif Author

yes, I did all of them from scratch ;)

Collapse
yuikoito profile image
Yuiko Ito

Wow... you are amazing..
I got to be a your fan! lol

Collapse
dacreb profile image
Alesba

amazing loader,

Collapse
luojiego profile image
Roger

awesome

Collapse
brayanarrieta profile image
Brayan Arrieta

@afif I believe that could be a good idea create npm package with the loader

Collapse
afif profile image
Temani Afif Author

I considered the fact that you will probably need 1 or 2 loader per project/website so I don't think you need to load a whole package of loaders. It's easier to copy/past the CSS of the loader you want and it's done :)

I am against a "loaders.min.css" where I will add all my code and then you will be using 1% of it.

Collapse
karnak19 profile image
Basile

Do a NPM package and become our next god ! 😍

Collapse
urielbitton profile image
Uriel Bitton

the arcades are sick! nice job man

Collapse
yuikoito profile image
Yuiko Ito

Thank you for your wonderful article!! I used the pokemon loading animation in my web-app. poke.art-creator.net/

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