React Step Progress Bar 🌡

A library to create stunning progress bars and steps in React.

📚 READ THE DOCS 📚

🌐 LIVE EXAMPLES 🌐

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:

``bash
npm install --save react-step-progress-bar
`

Or using yarn:

`bash
yarn add react-step-progress-bar
`

Examples

For more examples take a look at the official website.

$3

This example demonstrate how to create a simple progress bar.

`jsx
import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar } from "react-step-progress-bar";

class ProgressBar extends React.Component {
render() {
return (
percent={75}
filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
/>
);
}
}
`

$3

This example demonstrate how to create your own progress bar with steps.

`jsx
import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar, Step } from "react-step-progress-bar";

class StepProgressBar extends React.Component {
render() {
return (
percent={75}
filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
>

{({ accomplished }) => (
style={{ filter: grayscale(${accomplished ? 0 : 80}%) }}
width="30"
src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/9d/Pichu.png/revision/latest?cb=20170407222851"
/>
)}


{({ accomplished }) => (
style={{ filter: grayscale(${accomplished ? 0 : 80}%) }}
width="30"
src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/97/Pikachu_%28Smiling%29.png/revision/latest?cb=20170410234508"
/>
)}


{({ accomplished }) => (
style={{ filter: grayscale(${accomplished ? 0 : 80}%) }}
width="30"
src="https://orig00.deviantart.net/493a/f/2017/095/5/4/raichu_icon_by_pokemonshuffle_icons-db4ryym.png"
/>
)}


);
}
}
``

Guides

If you want an in-depth view of how to create your own custom steps and custom step transitions, the official website have some dedicated guides.

- Create your custom step
- Create your own step transition

API

$3

$3

#### License

MIT

---

> GitHub @pierreericgarcia  · 
> Twitter @pierrericgarcia  · 
> LinkedIn @pierre-eric-garcia  · 
> Medium @pierrericgarcia