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!


Also available online 👇

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


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 (166)

Collapse
 
nikitababko profile image
Nikita Babko

It's amazing. Thank you

Collapse
 
zhuhaohe profile image
Haohe Zhu

Awesome

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
 
vinhvp profile image
Vinhvp

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

Collapse
 
ercogx profile image
Vitalik

Cool Work

Collapse
 
isa56 profile image
isa56

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

Collapse
 
Collapse
 
isa56 profile image
isa56

Thank you!

Collapse
 
sainivinit profile image
Vinit kumar saini

thanks

Collapse
 
mveckovic profile image
Mike M. Veckovic

Great work, thank you

Collapse
 
creativemacmac profile image
creativemacmac

Amazing😍

Collapse
 
shohagcsediu profile image
Mohammad Shohag

nice

Collapse
 
progmamun profile image
Al Mamun Khan

wow

Collapse
 
sijan2 profile image
Sijan Mainali

Nice and beautiful design

Collapse
 
whoismaruf profile image
Maruf Khan

Thank you so much!

Collapse
 
hmphu profile image
Phu Hoang

Thank you! It's amazing

Collapse
 
latinbooker profile image
Víctor Morales Ch

Excelente, gracias por compartir

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