![\"React](\"https://image.ibb.co/iukmPe/react_step_progress_bar.gif\")
\n\n \n
\n \n ![\"npm](\"https://badge.fury.io/js/react-step-progress-bar.svg\"/){kind=icon}
\n \n \n 
\n \n \n 
\n \n \n 
\n \n
\n 📚 READ THE DOCS 📚\n
\n\n 🌐 LIVE EXAMPLES 🌐\n
\n\n## Key Features\n\n- Create simple progress bars or with steps 🌡\n- Customize your steps as you want 🎨\n- Create your own step animations 🎥\n\n## Installation\n\nTo use this library, you'll need the [npm](http://npmjs.com) CLI installed on your computer. From your command line, using npm:\n\n```bash\nnpm install --save react-step-progress-bar\n```\n\nOr using yarn:\n\n```bash\nyarn add react-step-progress-bar\n```\n\n## Examples\n\nFor more examples take a look at the [official website](https://pierreericgarcia.github.io/react-step-progress-bar).\n\n### Simple progress bar\n\nThis example demonstrate how to create a simple progress bar.\n\n```jsx\nimport React from \"react\";\nimport \"react-step-progress-bar/styles.css\";\nimport { ProgressBar } from \"react-step-progress-bar\";\n\nclass ProgressBar extends React.Component {\n render() {\n return (\n| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| percent | \nnumber | \n\n | Percantage of progression | \n
| children | \nStep component(s) | \n\n | ProgressBar only accepts Step as children | \n
| stepPositions | \narray of numbers | \n\n | By default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent) | \n
| unfilledBackground | \nstring | \nrgba($color: lightgrey, $alpha: 0.6); | \nThis props is used directly on the CSS background property of the unfilled part of the ProgressBar. | \n
| filledBackground | \nstring | \nrgba($color: #0074d9, $alpha: 0.8) | \nThis props is used directly on the CSS background property of the filled part of the ProgressBar | \n
| width (in pixel) | \nnumber | \n100% | \nThe width of the progress bar in pixel | \n
| height (in pixel) | \nnumber | \n10 | \nThe height of the progress bar in pixel | \n
| hasStepZero | \nboolean | \ntrue | \nTells if steps position should start at 0 or not | \n
| text | \nstring | \n\n | Add a text in the middle of the progress bar | \n
| name | \ntype | \ndefault | \ndescription | \n
|---|---|---|---|
| accomplished | \nboolean | \n\n | Tells if this Step has been accomplished | \n
| position | \nnumber | \n\n | The position in percentage of the Step on the ProgressBar | \n
| index | \nnumber | \n\n | The index of the Step in the ProgressBar | \n
| children | \nfunction | \n\n | The function used to render the content of the Step | \n
| transition | \nstring | \n\n | Use one of the built-ins transitions | \n
| transitionDuration (in ms) | \nstring | \n300 | \nThe duration of the transition | \n