DEV Community

Discussion on: Build your CSS loader with only one div — The Dots

Collapse
 
auroratide profile image
Timothy Foster

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

Three dots move along a figure-8 path

Collapse
 
afif profile image
Temani Afif

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.

Collapse
 
auroratide profile image
Timothy Foster

I forgot about the cubic-bezier function! I'll have to give that a good look soon; apparently there's a figure-8 demo right in the article as well ^^

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