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:

npm install react-step-progress-bar

Or using yarn:

yarn add react-step-progress-bar

Examples

For more examples take a look at the official website.

Simple progress bar

This example demonstrate how to create a simple progress bar.

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 (
      <ProgressBar
        percent={75}
        filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
      />
    );
  }
}

Progress bar with steps

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

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 (
      <ProgressBar
        percent={75}
        filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
      >
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
              width="30"
              src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/9d/Pichu.png/revision/latest?cb=20170407222851"
            />
          )}
        </Step>
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              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"
            />
          )}
        </Step>
        <Step transition="scale">
          {({ accomplished }) => (
            <img
              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"
            />
          )}
        </Step>
      </ProgressBar>
    );
  }
}

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

<ProgressBar/>

<Step/>

License

MIT

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