Is there any way to animate a conic-gradient in CSS?

Question

I have a circular graph that I want to use to track progress. I use this SASS definition:

@for $i from 0 through 100
    .circle-chart-#{$i}
        background: conic-gradient($cyan $i * 1%, $graphBackground $i * 1%)

Is there any way to animate (or fake animation) the change of the conic-gradient in CSS?

Answer 1

As for pure CSS implementation, you can try:

@property --percent {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

then you can use transition: --percent curve time; for manipulating conic-gradient percentages.

.circle-chart {
    background: conic-gradient(cyan var(--percent), white var(--percent));
}

Reference: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk