Comments (20)
@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!
from react-circular-progressbar.
I'm not sure if it's the best solution but I use this with another component (antd progress bar):
- 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;
-
Insert this component in your DOM
-
Reference your id in your CSS. In your case, probably something like this:
.CircularProgressbar .CircularProgressbar-path {
stroke: url(#idCSS);
}
from react-circular-progressbar.
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.
from react-circular-progressbar.
Anyone have a good way to create a conical gradient (so that the gradient traces the path, rather than being vertically/horizontally linear)?
from react-circular-progressbar.
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
from react-circular-progressbar.
@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.
from react-circular-progressbar.
@kevinsqi Although it's been about 3 years, could this eventually be added as an officially supported feature? Would appreciate it greatly, thanks.
from react-circular-progressbar.
thank you so much for you're help man. @Clafouti
from react-circular-progressbar.
@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.
from react-circular-progressbar.
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!
from react-circular-progressbar.
@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/
from react-circular-progressbar.
@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.
from react-circular-progressbar.
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
from react-circular-progressbar.
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
from react-circular-progressbar.
@kpguru20001 what did you try and what doesn't work?
from react-circular-progressbar.
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
from react-circular-progressbar.
Can you share some code? It'd be easier to see where the error could be. Maybe with https://codesandbox.io/
from react-circular-progressbar.
What would be gradientId
here ? I am quite confused. Any help ?
from react-circular-progressbar.
@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.
from react-circular-progressbar.
Other than antd library, can we apply the gradient to the "react-circular-progressbar"?
from react-circular-progressbar.
Related Issues (20)
- Is a Half Circle or Semir Circle possible ? To save some screen space. HOT 2
- Upgrade to React 18? HOT 4
- Can this be embedded into a Button? HOT 1
- Help HOT 1
- Doesn't work with react 18 above HOT 4
- have a fill animation from 0 to value for first render . HOT 1
- Unable to add image from local project to CircularProgressbar
- Handle to Manually change progress rather than programatically
- Going past 100%
- Transition not working after value>=80
- Custom sitemap file name. HOT 1
- Unable to add gradient to the trail color. HOT 1
- peer dependencies
- TypeError: Object prototype may only be an Object or null: undefined HOT 3
- How to set the path and trailcolor in form of variables name HOT 1
- Progress bar out of bounds and cut off on Safari
- Need a provision to show the color of the track around the filled path HOT 1
- [bug] :when i am importing the file it is showing in import error in next js
- circle animation is still not working
- AnimatedProgressProvider is outdated
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-circular-progressbar.