How to add a gradient as a color in circular bar?

[AlFalahTaieb]

No description provided.

[kevinsqi]

Hi @AlFalahTaieb! After looking into this a bit, I don't think there's a way to achieve this with the current svg path implementation, and the changes needed to implement it seems like it would increase the complexity of the component significantly for a relatively niche use case, so I don't think this is likely to be added. Sorry about that!

[Clafouti]

@AlFalahTaieb

I'm not sure if it's the best solution but I use this with another component (antd progress bar):

1. Create a Gradient component (something like this):

class GradientSVG extends Component {
  render() {
    let { startColor, endColor, idCSS, rotation } = this.props;

    let gradientTransform = `rotate(${rotation})`;

    return (
      <svg style={{ height: 0 }}>
        <defs>
          <linearGradient id={idCSS} gradientTransform={gradientTransform}>
            <stop offset="0%" stopColor={startColor} />
            <stop offset="100%" stopColor={endColor} />
          </linearGradient>
        </defs>
      </svg>
    );
  }
}

export default GradientSVG;

2. Insert this component in your DOM

3. Reference your id in your CSS. In your case, probably something like this:

.CircularProgressbar .CircularProgressbar-path {
  stroke: url(#idCSS);
}

[kevinsqi]

@Clafouti whoa, that works, that's awesome! Given how the path works, I noticed that you'd probably want to rotate 90 degrees and reverse startColor and endColor. End result:

Thanks for the helpful example!

[atomiks]

Anyone have a good way to create a conical gradient (so that the gradient traces the path, rather than being vertically/horizontally linear)?

[crisryantan]

@Clafouti in the antd progress bar you only circle and line right? can you explain more about you're snippet? https://ant.design/components/progress/

[Clafouti]

@xxryan1234 Sorry I don't really understand your question. You should be able to create a Gradient Component, insert it in your JSX and the refer it in your CSS/SASS/LESS/... with the right class name.

[crisryantan]

oh sorry. i think i misunderstood. I thought you said

but I use this with another component (antd progress bar):

so I assumed that you used the antd progress component and just added some modifications
@Clafouti

[Clafouti]

@xxryan1234 You're right I'm using this Gradient component example with antd Progress component.
I didn't add any code to the ant lib, I'm just using it like this:

{svgGradient}
 <Progress
  type="circle"
  percent={progressValue}
  strokeWidth={8}
  width={progressWidth}
  className={className}
  format={percent => `${percent} %`}
/>

With svgGradient like this:

<GradientSVG
 startColor="red"
 endColor="blue"
 idCSS={gradientName}
 rotation={90}
/>

As long as the UI library you're using is creating some SVG under the hood, you should be ok with that method.

[crisryantan]

thank you so much for you're help man. @Clafouti

[kpguru20001]

Hi,
i m a noob and still unable to figure out how to add gradient to progress bar i m using the progress bar in react

[Clafouti]

@kpguru20001 what did you try and what doesn't work?

[kpguru20001]

thanks for the help
i have made a javascript file named GradientCSS and imported the file in styledprogressbar.js and called styled progress bar in app js
in styledprogressbar.js i have called in style by typing url(#idCSS) but gives error saying idCSS not definrd

[Clafouti]

Can you share some code? It'd be easier to see where the error could be. Maybe with https://codesandbox.io/

[lambro]

Hi @kpguru20001 , also a n00b here posting my first ever comment on a git issue 💃 !

I put the styles inline instead of in the css, so that I can assign the ID dynamically, and in case there are more than one on the page, I also moved the children a level up so that the component can be re-used in multiple places:

[ ProgressBar.js ]

import React, { PureComponent } from 'react'
import CircularProgressbar from 'react-circular-progressbar'

// this is the inner circle with whatever you want inside
const CustomProgressBar = props => {
  const { children, ...otherProps } = props
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        height: '100%'
      }}
    >
      <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
        <CircularProgressbar {...otherProps} />
      </div>
      <div
        style={{
          position: 'absolute',
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        {props.children}
      </div>
    </div>
  )
}

// this is the component imported to the view
class ProgressBar extends PureComponent {
  render() {
    const {
      percentage,
      endColor,
      startColor,
      gradientId,
      children
    } = this.props
    const gradientTransform = `rotate(90)`
    return (
      <div
        className="progress-bar"
        style={{
          width: '200px',
          height: '200px'
        }}
      >
        <svg style={{ height: 0, width: 0 }}>
          <defs>
            <linearGradient
              id={gradientId}
              gradientTransform={gradientTransform}
            >
              <stop offset="0%" stopColor={startColor} />
              <stop offset="100%" stopColor={endColor} />
            </linearGradient>
          </defs>
        </svg>
        <CustomProgressBar
          percentage={percentage}
          strokeWidth="15"
          styles={{ path: { stroke: `url(#${gradientId})`, height: '100%' } }}
        >
          {children}
        </CustomProgressBar>
      </div>
    )
  }
}

export default ProgressBar

Here I used styles={{ path: { stroke: `url(#${gradientId})`, height: '100%' } }} to reference the gradientId.

In the view I use it like this:

<ProgressBar
      percentage={50}
      startColor="#53D9EB"
      endColor="#FFFFFF"
      gradientId="progress"
>
      <h5> some text </h5>
</ProgressBar>

Hope this helps.

[joshidhruv]

What would be gradientId here ? I am quite confused. Any help ?

[Clafouti]

@joshidhruv The gradientId would be a simple CSS id. As lambro said:

Here I used styles={{ path: { stroke: `url(#${gradientId})`, height: '100%' } }} to reference the gradientId.

[prasannamestha]

Here's a short tutorial for building gradient-enabled circular progress bars in react. Note: I am the author of the article: https://medium.com/better-programming/build-beautiful-gradient-enabled-circular-progress-bars-in-react-d0a746deed0

[DGKSK8LIFE]

@kevinsqi Although it's been about 3 years, could this eventually be added as an officially supported feature? Would appreciate it greatly, thanks.

[augdog97]

@kevinsqi @Clafouti Do you have a code example for the linear gradient component example that was posted above? I am not sure what to pass into the idCSS id prop.

[jaynatanawala]

Other than antd library, can we apply the gradient to the "react-circular-progressbar"?