An ReactJS component for displaying a circular progress meter. This is a fork of the AngularJS equivalent.
- Displays a circular progress meter.
- Utilises SVG for rendering.
- Adjustable dimensions, color and thickness.
- No additional dependencies outside of React.
You can add the plugin by adding react-progress-arc-x.x.x.js to your project.
Include the script in your application. Add a ProgressArc element where needed.
React.createElement(ProgressArc, {
size: {integer},
stroke: {string},
strokeWidth: {integer},
complete: {expression},
counterClockwise: {string},
background: {string}
})
<ProgressArc
size="{integer}"
stroke="{string}"
stroke-width="{integer}"
complete="{expression}"
counter-clockwise="{string}"
background="{string}"
/>
size
defines the pixel width and height for the svg element. This defaults to 100.stroke
defines the color of the progress arc. This should be a valid stroke property for an SVG circle element. This defaults to white.stroke-width
defines the width of the progress arc line in pixels. This should be a value between 1 andsize
/ 2. This defaults to 10.complete
is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring.counter-clockwise
is a boolean value that will render the progress arc in a counter-clockwise direction. Any value Javascript would recognise as true will be treated as such, with the exception of the literal string false which will be treated as a booleanfalse
.background
defines the color of the ring background. If not defined, no background is rendered.
As well as using attributes of the directive element, a progress arc can be styled using CSS.
// Use a more complex selector in your application to avoid styling other SVG elements.
circle {
stroke: rgba(0, 0, 0, 0.1);
stroke-linecap: round;
}
The stroke-dashoffset
property is used to render the position of the progress arc, so adding a transition for this property will result in smoother transitions between progress values.
circle {
transition: stroke-dashoffset 0.1s linear;
}
If you use CSS for styling, avoid setting the following properties that are used to calculate the progress arc position:
stroke-width
stroke-dasharray
stroke-dashoffset
For the current version you can't use an external function, but you have to change the corresponding values in the getDefaultProps
. Maybe somebody knows how to change the default props with an external function.
react-progress-arc is licensed under the MIT license. See LICENSE for details.