Loading Disco

Note

Your device is configured to “reduce motion”.

Please consider adjusting your settings temporarily to view this interaction.

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:

• GitHub
• StackBlitz

All I ask is that you reach out and share your work – I’d love to see it ✌🏼