Conic gradient Android spinner

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 "https://unpkg.com/open-props/easings.min.css";

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

That's it! 🤓

Try it #

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