rc-progress alternatives and similar libraries
Based on the "Loader" category.
Alternatively, view rc-progress alternatives based on common mentions on social networks and blogs.
-
-
-
-
-
-
react-loader
DISCONTINUED. React component that displays a spinner via spin.js until your component is loaded. -
-
-
-
-
-
-
-
Civic Auth - Auth in Less Than 5 Minutes
Do you think we are missing an alternative of rc-progress or a related project?
README
rc-progress
Progress Bar.
Example
https://progress.react-component.vercel.app/
Screenshots
Browsers
- support IE9+, Chrome, Firefox, Safari
Install
Usage
import { Line, Circle } from 'rc-progress';
export default () => (
<>
<Line percent={10} strokeWidth={4} strokeColor="#D3D3D3" />
<Circle percent={10} strokeWidth={4} strokeColor="#D3D3D3" />
</>
);
Compatibility
| IE / Edge | Firefox | Chrome | Safari | Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
API
props
name
type
default
description
strokeWidth
Number
1
Width of the stroke. Unit is percentage of SVG canvas size.
strokeColor
String
#2db7f5
Stroke color.
trailWidth
Number
1
Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth are not defined, it same as strokeWidth.
trailColor
String
#D9D9D9
Color for lighter trail stroke underneath the actual progress path.
strokeLinecap
String
'round'
The shape to be used at the end of the progress bar, can be butt, square or round.
prefixCls
String
rc-progress
prefix className for component
className
String
customized className
style
Object
style object will be added to svg element
percent
Number | Number[]
0
the percent of the progress
gapDegree
Number
0
the gap degree of half circle, 0 - 360
gapPosition
String
top
the gap position, value: top, bottom, left, right.
Installation
npm install --save rc-progress
Development
npm install
npm start
License
rc-progress is released under the MIT license.
*Note that all licence references and agreements mentioned in the rc-progress README section above
are relevant to that project's source code only.