React Step Progress Bar
A library to create stunning progress bars and steps in React.
Key Features
- Create simple progress bars or with steps ?
- Customize your steps as you want ?
- Create your own step animations ?
Installation
To use this library, you'll need the npm CLI installed on your computer. From your command line, using npm:
Or using yarn:
Example
Simple progress bar
This example demonstrate how to create a simple progress bar.
Progress bar with steps
This example demonstrate how to create your own progress bar with steps.
API
<ProgressBar/>
name | type | default | description |
---|---|---|---|
percent | number | Percantage of progression | |
children | Step component(s) | ProgressBar only accepts Step as children | |
stepPositions | array of numbers | By default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent) | |
unfillBackground | string | rgba($color: lightgrey, $alpha: 0.6); | This props is used directly on the CSS background property of the unfilled part of the ProgressBar. |
fillBackground | string | rgba($color: #0074d9, $alpha: 0.8) | This props is used directly on the CSS background property of the filled part of the ProgressBar |
width (in pixel) | number | 100% | The width of the progress bar in pixel |
height (in pixel) | number | 10 | The height of the progress bar in pixel |
hasStepZero | boolean | true | Tells if steps position should start at 0 or not |
text | string | Add a text in the middle of the progress bar |
<Step/>
name | type | default | description |
---|---|---|---|
accomplished | boolean | Tells if this Step has been accomplished | |
position | number | The position in percentage of the Step on the ProgressBar | |
index | number | The index of the Step in the ProgressBar | |
children | function | The function used to render the content of the Step | |
transition | string | Use one of the built-ins transitions | |
transitionDuration (in ms) | string | 300 | The duration of the transition |