Yes, another post about CSS loaders but this time you will build the loader! In this article, I will share with you a few tricks I used to build so...
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
Great tutorial! Love the encouragement for readers to try and make loaders using this technique.
I guess I'll get us started with the Three-Body Problem Loader! Turns out it's possible to get three stars in space to orbit each other in a figure-8 pattern (though, unfortunately, this probably doesn't happen in reality).
Nice one, we have our first loader 👍
By the way for such complex animation I recommend you my previous article: dev.to/this-is-learning/advanced-c... .. with some "magic" cubic-bezier you can get a better approximation with less code.
I forgot about the
cubic-bezierfunction! I'll have to give that a good look soon; apparently there's a figure-8 demo right in the article as well ^^Loved reading this thanks. Very nice. Doubt I'll ever make time for such artistic creation ;-) but that aside, what I'm a little rusty on (euphemism for clueless) is how this div is a CSS loader. I'm guessing you put the div on the page somehow, and on an event handler that's called when the whatever is complete you hide it?
A div, a span or any element can be your loader. We generally inject such element dynamically as a position:absolute element inside another element to create a loading effect and as you said a handler will later remove it.
You can also work by adding a class to the element that will trigger the creation of the loader inside a pseudo element then remove it when the work is done, ex: codepen.io/t_afif/pen/QWgaLmN
First time,
You are showing hand drawn ones
You are asking to support you on patron
And most importantly,
Best tutorial ever !
Great job
These seemed like magic, but now it seems so easy!
Great tutorial!
Great
Nice article. Will try this later today.
BTW is it you the one in the animated GIF?
no no, it's not me 😅
Nice, awesome!
Loved the simplicity of the article.
Keep up he good work!!
That's some excellent stuff! Didn't realize how powerful CSS is these days. Definitely will be using something like this in the future!
I really like your writing style, but still you should learn how to draw better .. 😂
I am drawing for myself so my poor skill should be enough 😉