DEV Community

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

I made 100 CSS loaders for your next project

Temani Afif on May 12, 2021

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 l...
Collapse
 
zhuhaohe profile image
Haohe Zhu

Awesome

Collapse
 
nikitababko profile image
Nikita Babko

It's amazing. Thank you

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
 
oyedele_habeeb_0b799af415 profile image
Oyedele Habeeb

Really amazing, thank you!

Collapse
 
vinhvp profile image
Vinhvp

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

Collapse
 
mveckovic profile image
Mike M. Veckovic

Great work, thank you

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
 
ercogx profile image
Vitalik

Cool Work

Collapse
 
latinbooker profile image
Víctor Morales Ch

Excelente, gracias por compartir

Collapse
 
afif profile image
Temani Afif

testing

Collapse
 
shohagcsediu profile image
Mohammad Shohag

nice

Collapse
 
hmphu profile image
Phu Hoang

Thank you! It's amazing

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😍

Collapse
 
jamesbhatta profile image
James Bhatta

Awesome and thanks

Collapse
 
whoismaruf profile image
Maruf Khan

Thank you so much!

Collapse
 
devvsakib profile image
Sakib Ahmed

thats so coool mannn

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

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

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
 
ambesh51 profile image
Ambesh Sharma

Please let me know you ,
Please share the link if you already find something progress bar with percentage till the website would load completely

Collapse
 
ricky11 profile image
Rishi U • Edited

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

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
 
afif profile image
Temani Afif

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

Collapse
 
kishoreandra profile image
kishoreandra

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

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

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
 
eknoor4197 profile image
Eknoorpreet Singh

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

Collapse
 
techman09 profile image
TechMan09

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

Collapse
 
__manucodes profile image
manu

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

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
__manucodes profile image
manu • Edited

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

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

ok, wait for them in the next collection 😉

 
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

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
 
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.

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

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

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

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

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

Collapse
 
silverman42 profile image
Sylvester Nkeze

Absolutely !!

Collapse
 
big78113828 profile image
Big

yoooooooooooooooooooooo

 
afif profile image
Temani Afif

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
 
pixelhtml profile image
pixel-html

Nice

Collapse
 
cdnfs profile image
CodingSpiderFox

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

Collapse
 
afif profile image
Temani Afif

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

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

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

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

This article deserve a 🦄!

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

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
LiuClassmate

U are a great man

Collapse
 
posandu profile image
Posandu

Another great post from @afif

Collapse
 
libeyondea profile image
Libeyondea • Edited

thank!

Collapse
 
moviedo9 profile image
Miguel Ángel

Such a wonderful job

Collapse
 
fgonzalezlez profile image
FRANCISCO GONZALEZ

Muchas gracias por compartir Temani

Collapse
 
maperezromero profile image
maperezromero

Great job!!!

Collapse
 
ddeshon profile image
DDeShon

Awesome work! These loaders are very impressive.

Collapse
 
ritaoportunity profile image
ritaoportunity

nice work, thank you sir

Collapse
 
tysonpomegranate profile image
tysonpomegranate

oo, love it. saved for later, thanks man

Collapse
 
macroramesh6 profile image
Ramesh Murugesan

This is great effort!

Collapse
 
semirteskeredzic profile image
Semir Teskeredzic

Great resource, keep up the great work!

Collapse
 
said_mounaim profile image
Said Mounaim

Woow, Great Work Thank You 😍😍

Collapse
 
afif profile image
Temani Afif

You can easily adjust the easing like you want for most of the loaders :) only few of them require some specific easing to have a perfect synchronization.

Collapse
 
juliavii profile image
juliavii

Not all heros wear capes.

F

Collapse
 
gozippy profile image
GoZippy

Thanks! I have some Igarashi
Ideas now... would like to make a set for my icon Z also... any tips?

Collapse
 
afif profile image
Temani Afif

what kind of set you want to have? what animation?

Collapse
 
uverus2 profile image
Konstantin Ruzhev

Amazing thank you ❤️. Have you thought about making this into a component library for Vue or React ? It would be a great idea.

Collapse
 
afif profile image
Temani Afif

I don't think it's necessary to complicate this with a library :) In most of the cases you will need one or two different loaders so simply copy the few lines of CSS you need ;)

Collapse
 
ozzythegiant profile image
Oziel Perez

Dude, is this a library!? If not, it should be.

Collapse
 
afif profile image
Temani Afif

maybe after I am done with the whole collection :) actually this is the first one and more are coming ;)

Collapse
 
basharabdullah profile image
Bashar Abdullah

That's A LOT OF GOOD STUFF!

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Awesome!

Collapse
 
itzmeelvis profile image
⛳Elvis Awowari da‘’ HackModder™⛹

I love every bit of this 👏

Collapse
 
xxshubhamxx profile image
Shubham Garg

This is just amazing, I'm blown away haha

Collapse
 
mikemaer1990 profile image
Michael Maertens

You are a legend 👏

Collapse
 
anandbaraik profile image
Anand-Baraik

Awesome, great work 👌🏻

Collapse
 
thekrprince profile image
Kumar Prince

This is awesome.

Collapse
 
karthiknayak98 profile image
KarthikNayak

Nice one

Collapse
 
1link profile image
1Link.Fun

nice

Collapse
 
osnibjunior profile image
Osni B. Junior

Oh! Great job 👏🏻👏🏻👏🏻

Collapse
 
edydeyemi profile image
Edydeyemi

This is awesome! Thanks for sharing

Collapse
 
funbeedev profile image
Fum

Brilliant as usual and thanks for sharing!!

Collapse
 
pavel_polivka profile image
Pavel Polívka

Awesome. Thank you.

I will probably still write loading in plain text :D

Collapse
 
jamesncox profile image
James Cox

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!

Collapse
 
afif profile image
Temani Afif

Welcome ;) stay tunned for more collections and in case you missed it I have already done more than 400 :) dev.to/afif/series/12016

Collapse
 
mmoutih profile image
marouane moutih

great job

Collapse
 
guscarpim profile image
Gustavo Scarpim • Edited

Nice! Congrats!

Collapse
 
sagarnaik12 profile image
sagarnaik12

This is THE BEST Animation Article I have ever read on Animation. Temani Afif , My Friend, Thanks a lot.

Collapse
 
host510 profile image
Mikhail

Thanks a lot for your work

Collapse
 
radonirinamaminiaina profile image
Radonirina Maminiaina

Awesome! Thank you for your share.

Collapse
 
madza profile image
Madza

Awesome stuff as always 💯🏆

Collapse
 
marex980 profile image
marex980

Awesome! Thanks a lot!

Collapse
 
no_cyphers profile image
Victor Lawrence

It's cool, really cool... I am already thinking of something to create with those loaders.

Collapse
 
kcmicheal profile image
KCM

Awesome stuff man...Your quote about "When you love something, you don't even count a day" got me, man😊🙌

Collapse
 
akshayvinod profile image
Akshay Vinod

Awesome bro. Appreciate your effort👏👏

Collapse
 
wickieonya profile image
Cinch

Awesome collection yoh. I like the pulsing ones the most. Thank you for sharing.

Collapse
 
brilliance profile image
Brilliance Oparaku

Wow this is simply amazing!!!
I'm bookmarking this!

Collapse
 
afif profile image
Temani Afif

and don't forget to follow me if you don't want to miss the next collection :) .. I will be doing more 100 amazing loaders ;)

Collapse
 
xenochem profile image
xenochem

This is awesome! Thank you!

Collapse
 
__victorchan profile image
Victor Chan

Woah thanks!!!

Collapse
 
faridsa profile image
farid

Relevant and beautiful work that you have done here. Congratulations.

Collapse
 
sudonitin profile image
Nitin Sahu

Thinking about creating a npm package for react Devs out there... 🌝
What say @afif ?

Collapse
 
afif profile image
Temani Afif

will think about the idea, by the way React dev (or any dev) can easily use my code without any package. All you have to do is to copy the CSS of the loader you want and apply the class to a div, that's all ;)

Collapse
 
kunalt96 profile image
Kunal Tiwari

This is awesome

Collapse
 
myabdi4 profile image
Abdirahman Nur

This is so cool.

Collapse
 
urielbitton profile image
Uriel Bitton

Dude these are sick!
Good work.
WIll be using!

Collapse
 
brunotdantas profile image
Bruno Dantas

Thanks a lot for yout time on this :)

Collapse
 
ankeshp03 profile image
Ankesh

This collection looks so beautiful and amazing. 😀
I have created a few loaders, you can add them too, if you feel it would be a good addition. ☺️

codepen.io/ankeshp03/full/NvqLYg

Collapse
 
danielignatov profile image
Daniel Ignatov

Amazing stuff!

Collapse
 
z2lai profile image
z2lai

Holy moly, nothing but simple HTML and CSS?! This is incredibly elegant and beautiful, just like all your other work!

Collapse
 
johnmartin01 profile image
Công Đạt

Great. Thank you.

Collapse
 
mxglt profile image
Maxime Guilbert

Really cool :)
Great work!

Collapse
 
wagnerbraga profile image
Wagner Braga

Not every hero uses cape!

Thank you very much!

Collapse
 
thexdev profile image
M. Akbar Nugroho

Thanks dude!

Collapse
 
anonystick profile image
anonystick

So great! Can I translate it into Vietnamese to help more developers? Thanks!

Collapse
 
afif profile image
Temani Afif

to translate what? :)

Collapse
 
anonystick profile image
anonystick

Rather I recommend your article to my friends.

Thread Thread
 
afif profile image
Temani Afif

yes, feel free to recommend my article to anyone but I don't think there is any relevant content that need translation ;)

Collapse
 
jashgopani profile image
Jash Gopani

Amazing amazing work🔥🔥.

Collapse
 
starjardin profile image
Tantely Andrianarivola

Wow!! This is awesome.

Thank you very much!

Collapse
 
giathanh profile image
Chau Lai Gia Thanh

Nice. This is so very beatiful.

Collapse
 
imrantechwiz profile image
Imran Khan

Really Thanks for these amazing loaders

Collapse
 
akshatsinghania profile image
Akshat Singhania

awesome thanks , bookmarked

Collapse
 
jorbari profile image
Jorbari

This is so helpful !!!!!!!!
Thanks for sharing.

Collapse
 
muhimen123 profile image
Muhimen

Hippity hoppity, your code is now property 😂

Collapse
 
zsercqw profile image
Max

Amazing. Great job

Collapse
 
fedeasin profile image
Fred

Great work!

Collapse
 
tahsin52225 profile image
Tahsin Ahmed

nice <3

Collapse
 
drementer profile image
Burak

Good work <3

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