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

Collapse
 
afif profile image
Temani Afif

testing

Collapse
 
richy55max profile image
Arnaud HONFIN

Amazing. Good Job

Collapse
 
jamesbhatta profile image
James Bhatta

Awesome and thanks

Collapse
 
ramusarithak profile image
ramuStar

*Very Awesome *

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

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

Collapse
 
afif profile image
Temani Afif

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

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

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

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
 
techman09 profile image
TechMan09

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

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

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

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

Nice

Collapse
 
big78113828 profile image
Big

yoooooooooooooooooooooo

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
 
devlorenzo profile image
DevLorenzo • 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