Another 100 CSS loaders for your next project
source link: https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Another 100 CSS loaders for your next project
May 25
・1 min read
CSS Loaders (2 Part Series)
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:
CSS Loaders (2 Part Series)
Discussion (65)
You. Are. So. Good. At. CSS!
But you didn't include this loader:
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 ;)
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
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
CollapseExpandCollapseExpand
All these great and complex loaders and I love the 2nd one in "The Dots II", one I have officially stolen 😋
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 🙏
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
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 !!" 🤣🤣
Thread
Thread
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
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
CollapseExpand
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 😉.
ok noted ;) you will see it in a future collection !
CollapseExpand
I'm your fan haha, congratulations on the work
CollapseExpand
Definitely saving this one for the future! Coming up with awesome loaders is so hard. Thank you so much for this!
you're welcome ;) and yes it's not that easy to create things. It's 90% thinking and 10% coding.
Given the support for animation in CSS these days I'm surprised it's not 95% / 5% 😉
CollapseExpandCollapseExpand
You are amazing at making these! Where do you get your inspiration?
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.
CollapseExpand
hello sir can i use this my startup website.
yes of course :) and you can drop a link here so I can see the result ;)
thanks for the reply sir i will be share you link after done😍
CollapseExpandCollapseExpand
Nice!
Do you have some loader related with music?
CollapseExpandCollapseExpandCollapseExpandCollapseExpandCollapseExpand
This is madness! Before you know it, you'll be building pure CSS loaders with academy award winning storylines!
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 ;)
CollapseExpandCollapseExpandCollapseExpand
Wow a lot of these are really good did you create them all?
CollapseExpand
Wow... you are amazing..
I got to be a your fan! lol
CollapseExpand
That’s awesome 👏
Can u do cards swapping css animation ?
CollapseExpandCollapseExpandCollapseExpand
@afif I believe that could be a good idea create npm package with the loader
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.
CollapseExpand
Do a NPM package and become our next god ! 😍
CollapseExpandCollapseExpandCollapseExpand
Man I just finished a Full-Stack E-Commerce website and I need one( I'm not that good in css )
thank you so much for these
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK