Loading Disco
An alternative to the loading spinner
Note
If your device is configured to “reduce motion” , you won’t get the full “Loading Disco” experience. Please consider adjusting your settings.
2 weeks ago, we landed in Hanoi to begin the Vietnam leg of our nomad journey . Almost immediately, things got off to a bad start; catfished by Airbnb, slapped by culture shock, and worst of all, my partner fell sick; confining us to a tiny hotel room for the foreseeable future.
In times like these, there’s nothing I love more than tending to my digital garden.
I fired up VS Code, and began playing around with a little “live location” concept; using a conic-gradient() to create a “radar”.
During some of the early exploration, I messed up with my z-index and a 1px portion of the radar began orbiting the circle like some sort of depressing gray aurora borealis. I’d inadvertently created a “loading spinner”.
Then it clicked; what if this could replace “loading spinners” altogether, and orbit the element that’s loading? With some bright and vivid colours, it could turn into a loading disco.
How Does it Work?
In a nutshell: there’s no border; there’s a gap.
Within the button, an absolutely-positioned conic-gradient rotates from the center – revealed through the gap.
It’s mostly CSS, but there’s a little JS to capture the button’s aspect ratio and “skew” the underlying gradient to match.
Can I Use This?
Of course! Feel free to copy, remix and improve to your heart’s content.
Here’s a slimmed-down example with React.js and vanilla CSS:
All I ask is that you reach out and share your work – I’d love to see it ✌🏼