'butt' is the default, but your default is 'round' and 'butt' is excluded from the options

see:
https://css-tricks.com/almanac/properties/s/stroke-linecap/

therefore
https://github.com/react-component/progress/blob/2.0.3/src/mixin.js#L10
should presumably be eg
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),

and
https://github.com/react-component/progress/blob/2.0.3/src/mixin.js#L21
should be
strokeLinecap: 'butt',

thanks

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Setting percent value from this.props calls the componentDidUpdate() automatically and the percent value gets set to undefined. Any idea why?

Would be pretty neat to make a gradient also instead of a plain color.

it should be this.refs.path? this.path is undefined

Is it possible to change the border color ?

Anyone get this working with Typescript? Please share your .d.ts.

Thanks in advance

Hi,
The component looks great, but I have an issue with usage of it. I have imported rc-progress it in the project. For example I use it on the first page in react application, the progress indicator Circle is shown in grey color, but no movement is visible in the circle.

import { Circle } from 'rc-progress';
..........
in render method:

<div className="progressInd">
    <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
</div>

Here is the HTML code produced by the Circle component in the browser page source:

here is what is rendered in the browser:

What could be the problem with the progress indicator?

It seems like there is not currently a way to specify that the value is indeterminate. DOM's <progress /> and and Android's ProgressBar both support indeterminate modes, can rc-progress?

I need my progress bar to be short, but thick. It seems like the aspect ratio of width to height is fixed. How can I control each independently?

I am currently using the Line Progress. It displays, but does not animate. Is there something I have to set explicitly for the initial animation to happen?

Thx.

@afc163 @tsj1107 @yiminghe @pencilcheck @wemyss

The higher the value for the stroke-dasharray the more accurate the progress bar is.

Try this value
10000

And have stroke-dashoffset be like
10000 - percentage

That would make it accurate

import { Circle } from 'rc-progress';

ReactDOM.render(<div>
  <Circle percent={0} strokeWidth="4" strokeColor="#D3D3D3" />
</div>, container);

is throwing

Uncaught TypeError: Cannot read property 'style' of null
    at Progress.componentDidUpdate (enhancer.js:42)

complaining about this line

先显示状态再变跟进度，如果变化区间较大时感觉到唐突，如下图：

this code maybe raise the error which is "Rendered more hooks than during the previous render"

paranoidjk commented 27 minutes ago

there is not a initialAnimate api, please see the api doc https://github.com/react-component/progress#api
If you want custom animate, just use css animation.

@paranoidjk, can you expand on what you mean by CSS animation? I am just looking for that initial animation when the progress bar goes from 0 to whatever the specified percentage is. Can you give me an example for the syntax? How would you add that initial animation to something like:

   <Circle percent="60.2" strokeWidth="5" strokeColor="#4b82b0" />

?

Thanks!

@afc163 @tsj1107 @yiminghe @pencilcheck @wemyss

If you check the demo using MS Edge, you will see that pressing the button will change the color of the progress path, but not how much of the track is filled.

http://react-component.github.io/progress/examples/simple.html

Thank you for making this great little component. I am looking for away to prevent the strokeWidth from scaling too large.

I attempted applying vector-effect="non-scaling-stroke" to the React created Paths but it appears to interfere with the pathStyle of the SVG element thus breaking the progress part of the ProgressBar.

Any ideas?

@afc163 Is the percentage text display a part of the component?

Thx.

I tried to do this in two ways.
First way was to set it from 0 to 100 and then just change the speed of the transition. Except that didn't seem to work at all for me. Though I feel like this should achieve the best results since the transitions are smoother than a state update.

The second way was to make a state update loop to bring it from 0 to 100.
I'm doing this the way @matthlavacka is showing in #5

The problem is that it's not very smooth and it seems to have the issue of not updating the circular bar progress until it's at like 45%, not very smooth.

https://jwm.d.pr/xVGSJJ/iR4iQJnY5N

Here's a somewhat choppy gif showing what I mean. You can see that the numbers start updating before the bar does.

The reset button, aka, setting the state to 0, has a really smooth animation. When I try this with 100 it just glitches for .3 seconds and then appears green.
There must be a better way D:

I use rc-progress 2.2.5. It appeared some dots on the down side of progress bar. I checked it in the last version of Google Chrome.
Look at screenshot via link.

My part of code in react application that uses rc-progress:
<Line percent={this.state.progressPercent} strokeWidth="1" strokeColor="#000" />

When the value of percent changes from 0 to 100 it no longer animates when before it did:

<Circle percent={percent} strokeWidth="8" strokeColor="#fff" trailWidth="8" trailColor="#6b6767" />

Currently can't easily override this - stroke-dashoffset 0.3s ease 0s, stroke 0.3s linear
Would be good to be able to provide our own

It possible to change the bar direction from the right to left?

As of React 15.5 these are being moved to seperate modules.

I'm happy to create a PR to fix this, though do we want to use ES6 with Babel, or just use the seperate modules?

platform: codesandbox

react: 16.13.1
rc-progress: 3.1.0

please take a look at demo repo
https://codesandbox.io/s/rc-progress-demo-7zp6t?file=/src/App.js

but works in rc-progress: 2.6.1

Hello!
I'm using fast-progress with function to set timeout for decrease:
decrease = () => {
const percent = this.state.percentage - 1;
if (percent < 0) {
clearTimeout(this.tm);
return;
}
this.setState({ percentage: percent });
this.tm = setTimeout(this.decrease, 30);
}

All is ok. But, when «percent == 0» I see a short delay indicator. After some time it disappears. There is no smoothness. https://codesandbox.io/s/3x6p0w149m

Can you help me, please?

I’m sorry for my English. Thank you very much!

In firefox, when circle percent 0 - stroke width it is still visible.

Are you able to put a gradient as the strokeColor? I've tried the standard way of writing it as the attribute but it doesn't work.

Refactoring progress with hooks seems like a breaking change. Was it appropriate to change version as 2.6.0? Application using React 15.x just crashed after installing new version of progress.

Hi, Thanks for the nice component. I need an extra option in the Line progress bar like "start and end" points. This progress bar always starts at 0. I need to option set like start from 20 to 55.
Thanks again.

Is there a way to display text (such as percentage value, etc.) in the center of the circular progress?

Thx.

@afc163 @tsj1107 @yiminghe @pencilcheck @wemyss

It would be great to be able to pass a style object to the SVG.

Hi! Right now I'm setting an intervall of something like [0,100]. I've got a handle that is dynamically adjustable to a value, say 50.

However, if the slider value exceeds the max limit set by the handle, not slider, the progress bar will still adjust the width property according to the slider. Is there any way to limit the rc-slider-track to read and limit the progress styling to the max value of the handle in addition to the slider?

Currently, the trail will have edges at the ends if you use the component with a gap. There should be an option to make the trail round, too: https://imgur.com/7gqxDbj

Basically the path data always makes the path starts somewhere half of the width of the stroke and I understand that works for circle but it wouldn't work for square or butt since it is basically adding offset to the beginning of the stroke and missing it up, so "5" percent looks like "15" percent.

Would propose to remove that. I can make a simple pull request for it if you want.

Is it possible to have call back after component mounted?

As you can see, a bar with these settings <Line percent={votePercent} strokeColor={styles.leftColour} trailColor={styles.rightColour} strokeWidth="5"/> where votePercent is 50 doesn't look at all like it's halfway. The two boxes above are both 100px wide and at equal distance from each other and the line. This is a bit weird, to be honest.

Hello,

When installing rc-progress via yarn, I'm seeing the following error:

warning rc-progress > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Could you please update this package's version of Babel? (Or release an updated version of this package on NPM, if Babel has already been updated in master?)

When defining a strokeWidth, the rounded corners are added to the length of the progress, so it looks bad.
You can try with a value of like 10, then it's obvious

Thanks for making this, I wish there was control of speed though.

It seems to me that babel-runtime code is included in the dist file. Can it be excluded somehow? Personally, I do not need it in my bundle and adding rc-progress as a dependency adds a lot of overhead because of it.

I'm trying to understand why it is there and if there are ways to exclude it but so far no luck.

Just a Question

Is there like a style for progress bar such as getting it striped like in the Bootstrap (https://getbootstrap.com/docs/4.1/components/progress/#striped)

or does the prefixCls allow a custom style for the progress bar?

Thanks!

Preview

As title, thanks.