[CircularProgress] Allow set a gradient stroke

[aristidescata]

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:
#7221 (comment)
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

[oliviertassinari]

@aristidescata I'm not sure to understand your use case. What are you trying to accomplish?

[aristidescata]

Sorry, i'll try to be more clear using the example you provide and modifying it a little bit:
https://codesandbox.io/s/ovoqq9mlly

basically i want to give a gradient color to the circle line instead of a solid color. and i don't know how to do it.

The color property does not support gradients, i.e. things like color: 'linear-gradient(90deg, #2bb0af 0, #23a7d7)'

[oliviertassinari]

The closest thing I could find is https://stackoverflow.com/questions/30147879/how-to-draw-a-linear-gradient-circle-by-svg. I fear you can't get along by simply modifying the CSS. You have to change the svg structure. It's not something we are directly interested in supporting. Let us know if you found a way. We could study how we could port the support back to the library.

[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

[vitalyaM]

@ShamansCoding,

Thank you bro, its work!

[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)' } }}/>

[denvradiy]

thank you guys! @antokhio @ShamansCoding