[CircularProgress] Allow set a gradient stroke

Hi, I want to set a gradient stroke for the CircularProgress component.

currently using the circle prop exposed by that component: Circular Progress API

const styles = theme => ({
    circle: {
        stroke: linear-gradient(90deg, #2bb0af 0, #23a7d7)
    }
});

but sadly the stroke property does not allow to set the gradient that way. You have to define this way:

<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10" 
        stroke="url(#Gradient01)" />
</svg>

I looked through the issues to see if someone else had the same problem and coudln’t find any anwser. The closest thing I got was this comment: https://github.com/mui-org/material-ui/issues/7221#issuecomment-311743969 which is exactly what i want.

Is there a special way to handle this?

Tech	Version
Material-UI	Next
React	16.0.0
Chrome	57

[ShamansCoding]

For those, who seek a convenient way to do this, I want to offer a solution below.

We need to use CircularProgress with SVG linear-gradient and set an id property to that linear-gradient. After, we can define a class that will refer to that id by CSS url() function. We add this referred linear-gradient to the “stroke” property of that class.

And in the end, we need to add that class to CircularProgress “class” property and override the “circle” class.

import React from 'react';
import { CircularProgress, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(() => ({
  circle: {
    stroke: "url(#linearColors)",
  },
}));

export default function GradientCircularProgress() {
  const classes = useStyles({});

  return (
    <>
      <svg width="300" height="300">
        <linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
          <stop offset="20%" stopColor="#39F" />
          <stop offset="90%" stopColor="#F3F" />
        </linearGradient>
      </svg>
      <CircularProgress
        thickness={4}
        classes={{ circle: classes.circle }}
      />
    </>
  );
}

Here is the link below to the codesandbox with an example and a gif.

GradientCircularProgress

[antokhio]

Mui 5 way:

<svg>
    <defs>
        <linearGradient id='my_gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
            <stop offset='0%' stopColor='rgba(184, 74, 202, 1)' />
            <stop offset='100%' stopColor='rgba(142, 66, 235, 1)' />
        </linearGradient>
    </defs>
</svg>

<CircularProgress sx={{'svg circle': { stroke: 'url(#my_gradient)' } }}/>