DEV Community

Cover image for I made 100 CSS loaders for your next project
Temani Afif
Temani Afif

Posted on • Updated on

I made 100 CSS loaders for your next project

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


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?

buy me a coffee

OR

Become a patron

Top comments (164)

Collapse
 
icecoffee profile image
Atulit Anand • Edited

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.

Collapse
 
afif profile image
Temani Afif

what kind of animation are you looking for?

Collapse
 
icecoffee profile image
Atulit Anand • Edited

Like one you see in upwork
Where the name becomes a symbol
Thanks for replying mate

Thread Thread
 
afif profile image
Temani Afif

where exactly on that page? can you show me a screenshot?

Thread Thread
 
icecoffee profile image
Atulit Anand

Here

Please check it out here, in the last couple of frames how a strand of SVG swooshes in and changes into UP

Thread Thread
 
afif profile image
Temani Afif

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/

Thread Thread
 
icecoffee profile image
Atulit Anand • Edited

Thank you very much, It's exactly what I wanted.

Thread Thread
 
itwasmattgregg profile image
Matt Gregg

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.

Collapse
 
francisc profile image
Fran Sancisco

Usually loaders are such an insignificant thing, until you try to find one that matches what you are building. Good karma for you!

Collapse
 
isa56 profile image
isa56

Wow! These are amazing!
Do you have any tips / materials to learn animations and such in CSS?

Collapse
 
afif profile image
Collapse
 
isa56 profile image
isa56

Thank you!

Collapse
 
ercogx profile image
Vitalik

Cool Work

Collapse
 
sainivinit profile image
Vinit kumar saini

thanks

Collapse
 
mveckovic profile image
Mike M. Veckovic

Great work, thank you

Collapse
 
vinhvp profile image
Vinhvp

Amazing, this is xịn sò, btw, i really love it, please accept my deepest gratitude.

Collapse
 
jamesbhatta profile image
James Bhatta

Awesome and thanks

Collapse
 
hmphu profile image
Phu Hoang

Thank you! It's amazing

Collapse
 
latinbooker profile image
Víctor Morales Ch

Excelente, gracias por compartir

Collapse
 
progmamun profile image
Al Mamun Khan

wow

Collapse
 
sijan2 profile image
Sijan Mainali

Nice and beautiful design

Collapse
 
richy55max profile image
Arnaud HONFIN

Amazing. Good Job

Collapse
 
ramusarithak profile image
ramuStar

*Very Awesome *

Collapse
 
creativemacmac profile image
creativemacmac

Amazing😍

Some comments have been hidden by the post's author - find out more