A way to quickly add a react progress bar to your app π
-
Install via npm and yarn
npm i -S react-sweet-progress // or yarn add react-sweet-progress -
Import
Progressand progress bar stylesimport { Progress } from 'react-sweet-progress'; import "react-sweet-progress/lib/style.css"; -
Enjoy
<Progress percent={88} status="success" />
<Progress type="circle" percent={100} status="success" />
Basic steps to customize React progress bar.
Percent cant set the completion percentage of progress bar.
<Progress />
<Progress
percent={69}
/>
You can use 3 status types: active, error, success. By default status equal to success when percent is 100.
<Progress
percent={88}
status="success"
/>
<Progress
percent={43}
status="error"
/>
With theme param you can customize icons and styles of the progress bar.
<Progress
theme={{
success: {
symbol: 'πβ',
color: 'rgb(223, 105, 180)'
},
active: {
symbol: 'π',
color: '#fbc630'
},
default: {
symbol: 'π±',
color: '#fbc630'
}
}}
/>
If you don't specify the theme trail color, then the deafult value of #efefef will be used.
<Progress
theme={
{
error: {
symbol: this.state.percent + '%',
trailColor: 'pink',
color: 'red'
},
default: {
symbol: this.state.percent + '%',
trailColor: 'lightblue',
color: 'blue'
},
active: {
symbol: this.state.percent + '%',
trailColor: 'yellow',
color: 'orange'
},
success: {
symbol: this.state.percent + '%',
trailColor: 'lime',
color: 'green'
}
}
}
/>
If you don't pass custom status then it will use the default color theme.
<Progress
theme={{
success: {
symbol: 'πβ',
color: 'rgb(223, 105, 180)'
}
}}
/>
Also you can use the status param.
<Progress
percent={100}
status="error"
theme={{
error: {
symbol: 'π€',
color: '#fbc630'
}
}}
/>
Width param can set the size of circle progress bar, also it's set font and icon sizes automatically.
<Progress
type="circle"
width={70}
percent={70}
/>
<Progress
type="circle"
percent={30}
/>
With strokeWidth param you can customize the path circle strokeWidth.
<Progress
type="circle"
strokeWidth={3}
percent={70}
/>
<Progress
type="circle"
percent={30}
/>
| Property | Description | Type | Default |
|---|---|---|---|
| percent | set the completion percentage | number | 0 |
| status | set the status of the progress, options: success, error, active |
string | - |
| theme | set the custom styles of the progress, options: [status]: { color: [string], trailColor: [string], symbol: '[any]'} |
object | - |
| style | set the custom style of the react progress bar | object | - |
| type | set the type of the progress bar, options: circle |
string | - |
| width | set sizes of progress bar type circle |
number | 132 |
| strokeWidth | set strokeWidth of progress bar type circle |
number | 6 |
| className | set the custom class of the react progress bar |
object | - |
| symbolClassName | set the symbol custom class |
object | - |
React Sweet Porgress designed to support the latest web browsers. We support the current versions of Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 11. Also support the latest mobile browsers.
git clone https://github.com/abraztsov/react-sweet-progress.gitcd react-sweet-progressnpm start- Go to
localhost:8080
Have an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!
This component based on ant design progress. Huge thanks them for a such an awesome work.
- Create
Circleprogress - Add flexibility to custom styles
1.1.1 Trail color can now be specified by a progress theme.
1.1.0 Added Circle progress
1.0.0 First release