not 100, not 200 but 300! Yes, a new collection and a total of 300 CSS loaders.
This time, I am going to rely on more elements to create the load...
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
Fantastic as always - quick heads up for everyone dont try and view the CSS for “Ben” on your phone - big crash if you do 😜🤣🤣
let's see how many Smartphone I will break 😝
It is no wonder it crashed my phone, it took about 5 seconds to open on my PC! (while inline, works fine if you open as external pen)
maybe it's time to change your 2000's PC 😋
What you think anyone can buy a new PC at the moment? You do know there is a CPU shortage! 🤣
It is that bad that to spec a PC to the same spec as my current one would cost me £500 more than I paid for it....how stupid is that?
It didn't totally crash my phone, but I did have to close and reopen my browser to leave this comment...
Please don't tell me not to try jumping off a bridge next 😂
It works fine in Chrome 90 for Android, and my device did not crash as I type this.
Of course it works in Android, it’s only iOS and it’s crappy safari browser that can’t handle anything more complicated than 2+2 - half of the loaders don’t work either on iOS as they don’t support the CSS features.
Hence why iOS is my work phone and Android for personal!
Oh and the speed issue on PC was because I had Illustrator saving a massive file...so that is embarrassing 😂
This is amazing!! Ever thought of making a Glitchy collection?
I'm thinking of Cyberpunk-ish glitch effects, but anything glitchy would be cool imo
Yes I am planning some glitch effect in the next collection ;) stay tuned! don't forget to follow to get notified when it will be released
Of course! One more thing comes to mind, ever thought of using Tailwindcss color classes to style your loaders? I ask this as I made a package (Nightwind) that automatically inverts them to create a dark theme. So in this case, you'd have dark-themed loaders for any TailwindCSS website
Not sure if this is something you'd be interested in, but I thought of telling you in case you'd like to experiment with it. (Feel free to reach out to discuss this! Happy to help out if I can)
not really, I am not a Tailwind fan. IMO, it's one of the worst Framework with his expensive CSS and classes that let people do simple things with complex code. You will notice that for the 1-color loaders I made there is always one value of color to change that will affect the whole loader so we don't really need tailwind for that, we can easily switch the color using an extra class or an inline CSS.
I think tailwind has improved a lot over time, but I also understand what you mean. Personally I think it’s a very subjective matter as there are good points that can be made on both sides.
Anyway keep up the great work! Your loaders are really cool ✨
Petition to make The Ben the actual loader for Dev.to, lol. @ben
(Love the food and the hourglass, by the way!)
Idea: Create a site where you demo all of these at once.
I like the idea of the demo website ;) will plan this shortly
Thank you so much! I tried to add it on my site, it still doesn't work. as example. How can I solve it? Do you have any contacts? Any ideas, pals?
which one did you add? and how I can see it in the code?
Awesome animations, thanks!
Google.com/photos/about/
can you check out this site on your PC, how can I achieve that particular animation with CSS.
How I love how the pictures animate when I scroll
I see no animation there ...
first!
arf no ^^
yes technically the first ;) I can confirm from the notification :p
Hey, cool job! Let's develop the community together. I wrote an article about free Flutter templates, if you have any products (not necessarily a flutter template) that you would like to share, please submit them on my website and I will add them to my article! - code.market/sign-up/
dev.to/pablonax/free-flutter-templ...
stop spamming the site with such comment. This behavior can get you a ban
Your loaders are entertaining in and of themselves. Makes me wish my sites were slower. ;)
Temani an another amazing set! How did you get so good at CSS, I'd love to read what you did to improve.
It's a lot of practise (and a lot of time on Stack Overflow). I invite you to start with these two articles:
dev.to/afif/all-you-need-to-know-a...
dev.to/afif/advanced-css-animation...
Most of what I am doing rely on background and animation and I am detailing a lot of stuff there.
I will be writing more in the future for sure.
Awesome thanks for the resources. They are going on today’s reading list.
You are definitely the god of loaders.
You've made 300 loaders so far! (3 posts)
Nice discord loader!!!!
haha liked the ben loader 😜
like you said "so far". Still didn't unleash all the CSS powers :p and I am still at one div per loader ;)
Wait - You're making even more?
Here's discord #2 -
yes of course, I will not stop at only 300 ;)
that loader is easier :p
That is awsome , you saved lot of developpers time , thank you ,,😄
Amazing, as always 🦄😊😁
thank
@ben I hope you don't mind being part of my collection 😋
For a minute, I thought you made 100 webpack-css-loaders and was scared.
Love these hey. I'll be using them soon
You are such a lifesaver! I never liked making loaders for any of my projects, but now I can just use one of the three - FREAKING - hundred you made.
Seriously, how'd you make that many?
well, I like to challenge myself :) I initially started by making my first 100 collection: dev.to/afif/100-underline-overlay-... and then In my brain : "come one you can do even more". Here I am with more than 700 animations :) and more are coming soon ;)
Love this!!
creative animation designer
Appreciate your effort bro👏
Fantastic! I like the old fashioned hour glass. Just out of curiosity would the sand moving from top to bottom show progress?
You can make it that way but my intention was to consider an infinite animation no matter the progress.
Awesome job! Under what license do you publish this? Do you require attribution?
The codepen licence apply (blog.codepen.io/documentation/lice...). Attrtibution is not required but It would be good to link back to this article to help people see the source and all the loaders options ;)
Ben was Awesome
Holy shit you're awesome man!
real heroes don't wear capes 🤩 Awesome initiative (although it's impossible to pick a favorite 😆)! proceeding to tweet
Amazing
Keep up the good work, just so you know, I included your work in my recent Twitter thread.
thanks :) I ❤ that tweet ;)
So enjoyable to look at these and imagine how they're made. Thanks very much :)
I love the nature and time ones, your creativity is limitless! Also, well done on the Discord challenge.
Very very nice, My favorite is "The Ben"
Nice project very amazing
Bro you are so good at this I just began website development like a month ago
Can you show me how you learnt these animations.
Thanks
I have been doing CSS for at least 4 years now so this is the result of a long run work. It's not just one or two courses I have read so I cannot really show you something. I can only advise you to keep learning and since you are at the beginning start with the basics first before trying to tweak with complex animations.
Awesome awesome awesome!
They are very unique!
You are crazy! Stop it :D
I can't 😆
i love the pizza one!
Oh my God of Loader!
This is dope!
Great loaders!
How can I use them with Wordpress, I tried a loader plug-in before but it slowed down my website... I would love to be to have a loader without using plugins
all you have to do is to add the div of the loader + its CSS then a small JS script that will remove the loader after the page load
I apologize if this causes inconvenience. gofund.me/c10031b3