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!
css-loaders.com
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:
You want to support me?
OR
Oldest comments (152)
This article deserve a 🦄!
Awesome! Thanks a lot!
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.
Awesome stuff as always 💯🏆
Awesome! Thank you for your share.
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 a lot for your work
This is THE BEST Animation Article I have ever read on Animation. Temani Afif , My Friend, Thanks a lot.
Great work!
Nice! Congrats!
great job
Well this is just incredible. I am astounded how much you've created here. Hats off to you! And thanks for offering this to everyone!
Welcome ;) stay tunned for more collections and in case you missed it I have already done more than 400 :) dev.to/afif/series/12016
Awesome. Thank you.
I will probably still write loading in plain text :D
Brilliant as usual and thanks for sharing!!
This is awesome! Thanks for sharing
Some comments have been hidden by the post's author - find out more