You either make a super fast website/application or you use loaders. I think most of us fall into the second category.
Now the question is: what loader should I use? the "loading" text, the 3 dots, a progress bar, the Batman symbol??
You no more need to bother yourself searching for loaders. Find below a collection of 100 different CSS loaders. From the simple one to the more fancy one, you will find the most suitable for your project.
Each loader is done using a single element. Yes, only one <div>, nothing more. You don't have to copy a ton of code. Add a class to your div and start loading!
Table of content
- The Classic
- The Infinity
- The Dots
- The Bars
- The Spinner
- The Continuous
- The Progress
- The Wobbling
- The Shapes
- The Pulsing
The Classic
The Infinity
The Dots
The Bars
The Spinner
The Continuous
The Progress
The Wobbling
The Shapes
The Pulsing
That's it!
I hope you liked this first collection of CSS loaders. Yes, it's only the first one and more will come! stay tuned and follow me if you don't want to miss the next collection. 👍
Before you leave don't forget to check the underline/overlay collection I made. More than 100 different animations as well:
Discussion (120)
This is so beautiful , I'm enthralled.
Seriously I want to animate my name too any advise @afif or anyone would like to give me.
what kind of animation are you looking for?
Like one you see in upwork
Where the name becomes a symbol
Thanks for replying mate
where exactly on that page? can you show me a screenshot?
Here
Please check it out here, in the last couple of frames how a strand of SVG swooshes in and changes into UP
such animation aren't easy to perform using CSS only. Either you use SVG or canvas. Either you have a strong SVG skill to build it alone from scratch (not an easy task) or you consider some plugin. Ex: cssscript.com/svg-text-font-animate/ / codepen.io/Zaku/pen/ALChE / greensock.com/gsap-plugins/
Thank you very much, It's exactly what I wanted.
Yea for complex stuff like that I work on your Adobe after effects skills and then use a tool like lotti github.com/airbnb/lottie-web to convert it into a web animation. You can draw svg letters easily enough but complex stuff is animation design usually done with AE.
Can I use progress bars and Javascript to make a preloader, basically I would get the percentage till the website would load completely and till that I would keep updating the loader, I know the result won't be beautiful, but will it get the job done?
yes you can, as you can see most of the progress rely on background-size going from
0% 0%toX 0%. All you have to do is to update the X until you reach the max value (the one I used in the keyframe)Thank you, I appreciate your work a lot.
I have another question how do I center it ?
It depends on your HTML strucutre. Each loader is a single div so any centring method will work (flexbox, CSS grid, position:absolute, etc)
Hi Temani! Amazing stuff—I'm currently trying to reproduce these on my end locally to sharpen my CSS skills. I was wondering if you could clarify how classic-3 works—why is it that we animate the background-position-x from
200%to80%, but the image appears to be moving to the right rather than to the left? Thanks!I invite you to read this: dev.to/afif/all-you-need-to-know-a... :)
I am giving a detailed explanation about how background-position work and you will find there that if the size is bigger than 100% (like in the case of Classic 3) the movement is inverted.
Very interesting, thanks for the link!
All great, for me I use the simplest loader of them all with only HTML
<progress></progress>Without any styling needed.
Nice 😄, 4 requests for you in CSS:
Create Material Circular progress indicators and This
Create Material Linear progress indicators
Create Material Circular progress indicators with 3 colors
Create Smooth Bouncing Logo
ok, wait for them in the next collection 😉
Thanks, man, I am a frontend developer, and most of the time I have to find the right gif for the project and it was very difficult for me but from on I'll use these, I have bookmarked the page you're great.
Amazing job! Keep up the good work 🙂
Nice
awesome :) could you please add a license and post it on Github?
will do when I am done with all the collection ;) I will still release more loaders
:( can't wait
you can start using them if you want. The codepen licence apply to my code ;)
I simply suggest users to link back to my posts when using my code so that people can find all the other stuff I am doing. It's not mandatory by the way.
WOW. just wow. This is amazing, thanks so much for sharing!
Awesome work, Afif. With permission I would like to make a VueJs plugin out of these loaders. They are too cool.
yes sure, don't forget to give a small attribution somwhere and link to this post :)
Absolutely !!
Amazing loaders!!!!
Thank you for sharing - I am using it in my project
great :) .. but your site is not loading for me.
oh. oops. my website is down. :(
I'll let you know when it's back online again...
How long does it take to be as pro as you 😀
I don't count the time ;) I simply try to be a little better each day and I never stop doing this :)
Not even a day ? 😀
when we love something we don't count, even a day :) but for sure it's a LOT of days
yoooooooooooooooooooooo
This article deserve a 🦄!
Such a wonderful job
Muchas gracias por compartir Temani
Great job!!!
Awesome work! These loaders are very impressive.
nice work, thank you sir
oo, love it. saved for later, thanks man
This is great effort!
Great resource, keep up the great work!
Woow, Great Work Thank You 😍😍
Not all heros wear capes.
F
Thanks! I have some Igarashi
Ideas now... would like to make a set for my icon Z also... any tips?
what kind of set you want to have? what animation?
Amazing thank you ❤️. Have you thought about making this into a component library for Vue or React ? It would be a great idea.
I don't think it's necessary to complicate this with a library :) In most of the cases you will need one or two different loaders so simply copy the few lines of CSS you need ;)
Dude, is this a library!? If not, it should be.
maybe after I am done with the whole collection :) actually this is the first one and more are coming ;)
That's A LOT OF GOOD STUFF!
Awesome!
Some comments have been hidden by the post's author - find out more