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

Discussion (142)

Collapse
icecoffee profile image
Atulit Anand • Edited on

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 Author

what kind of animation are you looking for?

Collapse
icecoffee profile image
Atulit Anand • Edited on

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

Thread Thread
afif profile image
Temani Afif Author

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 Author

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 on

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
programmer285 profile image
programmer285

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?

Collapse
afif profile image
Temani Afif Author

yes you can, as you can see most of the progress rely on background-size going from 0% 0% to X 0%. All you have to do is to update the X until you reach the max value (the one I used in the keyframe)

Collapse
programmer285 profile image
programmer285

Thank you, I appreciate your work a lot.

Collapse
programmer285 profile image
programmer285

I have another question how do I center it ?

Thread Thread
afif profile image
Temani Afif Author

It depends on your HTML strucutre. Each loader is a single div so any centring method will work (flexbox, CSS grid, position:absolute, etc)

Collapse
eknoor4197 profile image
Eknoorpreet Singh

Wow! This is awesome! Time to replace the loading spinner in my current project :D

Collapse
ricky11 profile image
Rishi U • Edited on

All great, for me I use the simplest loader of them all with only HTML

<progress></progress>

Without any styling needed.

Collapse
violet profile image
Elena • Edited on

I also wanted to say, that the simple progress loader is the actual progress html element :)

Unfortunately each browser displays it a bit different, so it may not be what you want if you look for pixel perfect.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

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% to 80%, but the image appears to be moving to the right rather than to the left? Thanks!

Collapse
afif profile image
Temani Afif Author

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.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Very interesting, thanks for the link!

Collapse
kishoreandra profile image
kishoreandra

Woah !! amazing collection ... picking one from here for our project

Collapse
afif profile image
Temani Afif Author

stop spamming the site, you will get banned doing this. (I am a moderator here)

Collapse
manuthecoder profile image
Manu

Amazing loaders!!!!
Thank you for sharing - I am using it in my project

Collapse
afif profile image
Temani Afif Author

great :) .. but your site is not loading for me.

Collapse
manuthecoder profile image
Manu • Edited on

oh. oops. my website is down. :(
I'll let you know when it's back online again...

Collapse
greenreader9 profile image
Greenreader9

Wow! That is so amazing, keep up the amazing work!

Collapse
loia5tqd001 profile image
Nguyễn Huỳnh Lợi

How long does it take to be as pro as you 😀

Collapse
afif profile image
Temani Afif Author

I don't count the time ;) I simply try to be a little better each day and I never stop doing this :)

Collapse
loia5tqd001 profile image
Nguyễn Huỳnh Lợi

Not even a day ? 😀

Thread Thread
afif profile image
Temani Afif Author

when we love something we don't count, even a day :) but for sure it's a LOT of days

Collapse
iftikhar profile image
iftikhar hussain

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.

iakovosvo profile image
iakovosvo

You said you won't do it again but you are spamming all over the place!

Thread Thread
afif profile image
Temani Afif Author

Don't worry. I escalated the issue to the Mod team and they will take some action soon. I gave him a chance but he think we are stupid persons here.

Collapse
n1ght4ngel19 profile image
Levente Hadházi

Amazing job! Keep up the good work 🙂

Collapse
shaijut profile image
Shaiju T
Collapse
afif profile image
Temani Afif Author

ok, wait for them in the next collection 😉

Collapse
silverman42 profile image
Sylvester Nkeze

Awesome work, Afif. With permission I would like to make a VueJs plugin out of these loaders. They are too cool.

Collapse
afif profile image
Temani Afif Author

yes sure, don't forget to give a small attribution somwhere and link to this post :)

Collapse
silverman42 profile image
Sylvester Nkeze

Absolutely !!

Collapse
cdnfs profile image
CodingSpiderFox

awesome :) could you please add a license and post it on Github?

Collapse
afif profile image
Temani Afif Author

will do when I am done with all the collection ;) I will still release more loaders

Collapse
cdnfs profile image
CodingSpiderFox

:( can't wait

Thread Thread
afif profile image
Temani Afif Author

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.

Collapse
pixelhtml profile image
pixel-html

Nice

Collapse
juanchax profile image
juanchax

WOW. just wow. This is amazing, thanks so much for sharing!

afif profile image
Temani Afif Author

What if I don't want to read it? it's on DEV so if someone want to read it, he will do. Don't add comment to each post. This is not an appropriate behavior. Do you want me to send you a message each time I put an article on DEV? I don't think so

Collapse
big78113828 profile image
Big

yoooooooooooooooooooooo

Collapse
mxglt profile image
Maxime Guilbert

Really cool :)
Great work!

Collapse
keglostephane profile image
keglo stephane

beautiful !

Collapse
jackfr0st13 profile image
Deepak Choudhary

Please take my super like, sir. This is so good !! Great work!!

afif profile image
Temani Afif Author

no, you don't do this! We don't oblige people to see posts. You will get banned for doing this.

Collapse
peprahk713 profile image
peprahk713

This is so amazing....

This has really reduced my work load

Collapse
imiahazel profile image
Imia Hazel

Thanks.
A valuable addition in my collection.

Collapse
liujie profile image
heliujie

U are a great man

Collapse
posandu profile image
Posandu 🇺🇦

Another great post from @afif

Collapse
libeyondea profile image
Libeyondea • Edited on

thank!

Collapse
moviedo9 profile image
Miguel Ángel

Such a wonderful job

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