RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools Icon
Abstract spinner image with many in inbetween states
A series of images of an avatar doing a bunch of skateboard tricks.

Conic gradient Android spinner

3 min read

Last week I shared a circular chart effect using a conic gradient and a radial gradient mask. Then I saw this:

We can use the same work from the chart to make this spinner, see!

Gradient changes #

Only a few lines of code need changed to mimmick the Spotify spinner with the previous work.

The conic gradient used to be pink to cyan (up to the angle), then transparent after that:

#pie {
  background-image: conic-gradient(deeppink, cyan var(--ng), #0000 0);

The spinner doesn't need the gradient, so we can go with one less color. Also, the transparency needs to be first, and end with white, so reverse the order of the color stops.

#spinner {
  background-image: conic-gradient(#0000 270deg, white 0);

Adding animation #

Here's my favorite way to make an infinite rotation animation in CSS:

@keyframes rotate {
  to {
    rotate: 1turn;

With those keyframes we can create an infinite animation:

@import "";

#spinner {
  animation: rotate .8s var(--ease-out-4) infinite;

The Open Props easings were clutch in the effect. Notice how sharp that ease out is, that's definitely custom. With Open Props I was able to try on a few of the more extreme ease-out props until I found one that matches what I saw on Android.

ICYMI; Open Props has 5 variants for each of the standard easings in CSS. For example, ease-out-1 is the most subtle ease out, while ease-out-5 is dramatic.

That's it! 🤓

Try it #

Here's the Codepen for you to try it out and see it for yourself.

Mentions #

Join the conversation on

  • nos nart
  • castastrophe
  • Nguyen Tien Thanh
  • Jon Carenza
  • ❖ Kei ラングレー

@argyleink In the Codepen embed at the bottom, the edit-on-codepen link has the wrong color, making it invisible. What’s up with that?

Šime VidasŠime Vidas

Crawl the CSS Webring?

previous sitenext site
a random site