progress

A library to create stunning progress bars and steps in React

Sep 08, 2018
A library to create stunning progress bars and steps in React

React Step Progress Bar

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

View demo Download Source

React-Step-Progress-Ba

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 --save react-step-progress-bar

Or using yarn:

yarn add react-step-progress-bar

Example

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} fillBackground="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} fillBackground="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> ); } }

API

<ProgressBar/>

nametypedefaultdescription
percentnumberPercantage of progression
childrenStep component(s)ProgressBar only accepts Step as children
stepPositionsarray of numbersBy default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent)
unfillBackgroundstringrgba($color: lightgrey, $alpha: 0.6);This props is used directly on the CSS background property of the unfilled part of the ProgressBar.
fillBackgroundstringrgba($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)number100%The width of the progress bar in pixel
height (in pixel)number10The height of the progress bar in pixel
hasStepZerobooleantrueTells if steps position should start at 0 or not
textstringAdd a text in the middle of the progress bar

<Step/>

nametypedefaultdescription
accomplishedbooleanTells if this Step has been accomplished
positionnumberThe position in percentage of the Step on the ProgressBar
indexnumberThe index of the Step in the ProgressBar
childrenfunctionThe function used to render the content of the Step
transitionstringUse one of the built-ins transitions
transitionDuration (in ms)string300The duration of the transition

GitHub

Recommended