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:
Top comments (153)
Awesome
It's amazing. Thank you
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.
Really amazing, thank you!
Amazing, this is xịn sò, btw, i really love it, please accept my deepest gratitude.
Great work, thank you
Wow! These are amazing!
Do you have any tips / materials to learn animations and such in CSS?
I have a series of articles explaining some of the loaders:
dev.to/afif/build-your-css-loader-...
freecodecamp.org/news/how-to-creat...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
Thank you!
thanks
Cool Work
Excelente, gracias por compartir
Some comments have been hidden by the post's author - find out more