I made 100 more CSS loaders for your next project
source link: https://dev.to/afif/i-made-100-more-css-loaders-for-your-next-project-4ioa
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.
I made 100 more CSS loaders for your next project
Jun 1
・2 min read
CSS Loaders (3 Part Series)
not 100, not 200 but 300! Yes, a new collection and a total of 300 CSS loaders.
This time, I am going to rely on more elements to create the loaders ... No, I am joking 😜, still only one <div> per loader, nothing more!
PS: I wanted to make it clear that all what I am sharing is my own work done from scratch. It's not a listing of other people works. it's not a collection of CSS loaders picked from different places. I only share what I have done. To be used for free of course.
Let's go!
Table of content
The Classic III
The Dots III
The Hypnotic II
The Bars II
The Spinner III
The last spinner is detailed in a Stack Overflow answer I gave
The Dots vs The Bars
They start as friends but ...
To be continued ...
The Nature
The Time
The Shapes III
The Hungry
The Discord
Someone challenged me so I had to do it.
It's not a perfect replicate but close enough 😁
The Ben
A last one for the fun. I added a click handler to avoid the spoils. Click and wait until the end
A small joke to remind you that even if you use a loader, your website need to be fast 😉 and yes Ben is done with pure CSS, I am not using any image. I know it's crazy...
That's it!
I hope you enjoyed this 3rd collection. If you want more don't forget to ❤🦄! If you have some funny or crazy ideas of loaders you want me to do, leave a comment 👇
I don't do only loaders if you want more fun:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK