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...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Awesome
It's amazing. Thank you
Awesome 👍 😎
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.
what kind of animation are you looking for?
Like one you see in upwork
Where the name becomes a symbol
Thanks for replying mate
where exactly on that page? can you show me a screenshot?
Here
Please check it out here, in the last couple of frames how a strand of SVG swooshes in and changes into UP
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/
Thank you very much, It's exactly what I wanted.
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.
Really amazing, thank you!
Great work, thank you
Cool Work
Amazing, this is xịn sò, btw, i really love it, please accept my deepest gratitude.
Wow! These are amazing!
Do you have any tips / materials to learn animations and such in CSS?
I have a series of articles explaining some of the loaders:
dev.to/afif/build-your-css-loader-...
freecodecamp.org/news/how-to-creat...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
css-tricks.com/single-element-load...
Thank you!
thanks
Thank you! It's amazing
Thank you so much!
Amazing. Good Job
Excelente, gracias por compartir
testing
Awesome and thanks
nice
*Very Awesome *
Amazing😍
wow
thats so coool mannn
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?
yes you can, as you can see most of the progress rely on background-size going from
0% 0%toX 0%. All you have to do is to update the X until you reach the max value (the one I used in the keyframe)I have another question how do I center it ?
It depends on your HTML strucutre. Each loader is a single div so any centring method will work (flexbox, CSS grid, position:absolute, etc)
Thank you, I appreciate your work a lot.
Please let me know you ,
Please share the link if you already find something progress bar with percentage till the website would load completely
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%to80%, but the image appears to be moving to the right rather than to the left? Thanks!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.
Very interesting, thanks for the link!
All great, for me I use the simplest loader of them all with only HTML
<progress></progress>Without any styling needed.
I also wanted to say, that the simple progress loader is the actual
progresshtml element :)Unfortunately each browser displays it a bit different, so it may not be what you want if you look for pixel perfect.
Woah !! amazing collection ... picking one from here for our project
Wow! This is awesome! Time to replace the loading spinner in my current project :D
stop spamming the site, you will get banned doing this. (I am a moderator here)
Amazing loaders!!!!
Thank you for sharing - I am using it in my project
great :) .. but your site is not loading for me.
oh. oops. my website is down. :(
I'll let you know when it's back online again...
Wow! That is so amazing, keep up the amazing work!
You said you won't do it again but you are spamming all over the place!
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.
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.
How long does it take to be as pro as you 😀
I don't count the time ;) I simply try to be a little better each day and I never stop doing this :)
Not even a day ? 😀
when we love something we don't count, even a day :) but for sure it's a LOT of days
Nice 😄, 4 requests for you in CSS:
Create Material Circular progress indicators and This
Create Material Linear progress indicators
Create Material Circular progress indicators with 3 colors
Create Smooth Bouncing Logo
ok, wait for them in the next collection 😉
yoooooooooooooooooooooo
Awesome work, Afif. With permission I would like to make a VueJs plugin out of these loaders. They are too cool.
yes sure, don't forget to give a small attribution somwhere and link to this post :)
Absolutely !!
Nice
WOW. just wow. This is amazing, thanks so much for sharing!
awesome :) could you please add a license and post it on Github?
will do when I am done with all the collection ;) I will still release more loaders
:( can't wait
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.
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
nice work, thank you sir
Wow this is simply amazing!!!
I'm bookmarking this!
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 ;)
This is awesome! Thank you!
Thanks! I have some Igarashi
Ideas now... would like to make a set for my icon Z also... any tips?
what kind of set you want to have? what animation?
Awesome collection yoh. I like the pulsing ones the most. Thank you for sharing.
Awesome bro. Appreciate your effort👏👏
Awesome stuff man...Your quote about "When you love something, you don't even count a day" got me, man😊🙌
Amazing thank you ❤️. Have you thought about making this into a component library for Vue or React ? It would be a great idea.
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 ;)
It's cool, really cool... I am already thinking of something to create with those loaders.
Muchas gracias por compartir Temani
Such a wonderful job
U are a great man
Thanks.
A valuable addition in my collection.
This is so amazing....
This has really reduced my work load
Please take my super like, sir. This is so good !! Great work!!
no, you don't do this! We don't oblige people to see posts. You will get banned for doing this.
nice
beautiful !
Another great post from @afif
This article deserve a 🦄!
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.
Awesome! Thanks a lot!
Awesome, great work 👌🏻
Woow, Great Work Thank You 😍😍
Awesome stuff as always 💯🏆
Awesome work! These loaders are very impressive.
Awesome! Thank you for your share.
Thanks a lot for your work
This is THE BEST Animation Article I have ever read on Animation. Temani Afif , My Friend, Thanks a lot.
Nice! Congrats!
great job
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!
Welcome ;) stay tunned for more collections and in case you missed it I have already done more than 400 :) dev.to/afif/series/12016
Awesome. Thank you.
I will probably still write loading in plain text :D
I love every bit of this 👏
Brilliant as usual and thanks for sharing!!
This is just amazing, I'm blown away haha
You are a legend 👏
Awesome!
That's A LOT OF GOOD STUFF!
This is awesome! Thanks for sharing
Dude, is this a library!? If not, it should be.
maybe after I am done with the whole collection :) actually this is the first one and more are coming ;)
Great resource, keep up the great work!
Oh! Great job 👏🏻👏🏻👏🏻
Great job!!!
Nice one
This is awesome.
awesome thanks , bookmarked
Really Thanks for these amazing loaders
Nice. This is so very beatiful.
oo, love it. saved for later, thanks man
Amazing amazing work🔥🔥.
So great! Can I translate it into Vietnamese to help more developers? Thanks!
to translate what? :)
Rather I recommend your article to my friends.
yes, feel free to recommend my article to anyone but I don't think there is any relevant content that need translation ;)
Wow!! This is awesome.
Thank you very much!
thank!
Thanks dude!
Not every hero uses cape!
Thank you very much!
Really cool :)
Great work!
Great. Thank you.
Holy moly, nothing but simple HTML and CSS?! This is incredibly elegant and beautiful, just like all your other work!
Woah thanks!!!
Amazing stuff!
This is awesome
This is great effort!
Not all heros wear capes.
F
Dude these are sick!
Good work.
WIll be using!
Thanks a lot for yout time on this :)
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
This is so cool.
Thinking about creating a npm package for react Devs out there... 🌝
What say @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 ;)
Relevant and beautiful work that you have done here. Congratulations.
Hippity hoppity, your code is now property 😂
This is so helpful !!!!!!!!
Thanks for sharing.
nice <3
Amazing. Great job
Great work!
Good work <3