react-progress-ui

React Progress UI

Simple Progress Components for your React Applications. The current provided components are:

• ProgressBar
• DottedProgress
• Spinner

Getting Started

Install from npm:

npm install --save react-progress-ui

Examples

Examples

ProgressBar

Using the ProgressBar is easy. It consists of only two divs. An outside div that you can think of as the "container", and an inside div that fills a certain percentage width of the container.

Please read all of the documentation related to the progress bar before using.

import { ProgressBar } from 'react-progress-ui'

<ProgressBar
 percentageDone={70}
/>

The container and filler have some default styling built in, just so you can see something on the screen when you add it to your project. These are the default styles:

const defaultContainerStyles = {
  height: '10px',
  width: '300px',
  borderRadius: '20px',
  border: '1px solid #333'
};

const defaultFillerStyles = {
  height: '100%',
  background: '#1DA598',
  width: '20%',
  borderRadius: 'inherit'
};

Props API:

1. ) containerStyles (object) An object with all of your styling for the outside portion of the progress bar. You can style inline or use a currently existing object.
2. ) fillerStyles (object) An object with all of your styling for the filler portion of the progress bar. You can style inline or use a currently existing object.
3. ) percentageDone (number) A number that controls the width of the filler.

DottedProgress

DottedProgress is a horizontal timeline styling progress indicator.

import { DottedProgress } from 'react-progress-ui'

<DottedProgress
 numSteps={5}
/>

The horizontal line and dots have some default styling built in, just so you can see something on the screen when you add it to your project. These are the default styles:

const defaultLineStyles = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  width: '500px',
  height: '2px',
  background: '#dde4e9',
  borderRadius: '8px'
};

const defaultDotStyles = {
  width: '12px',
  height: '12px',
  borderRadius: '50%',
  border: '1px solid #dde4e9',
  background: 'white'
};

Props API:

1. ) numSteps (number) How many steps the task takes.
2. ) activeStep (number) Which step the user is currently on.
3. ) activeDotColor (string) The color of the active step.
4. ) lineStyles (string) An object with all of your styling for the horizontal line. You can style inline or use a currently existing object.
5. ) dotStyles (string) An object with all of your styling for the dot. You can style inline or use a currently existing object.

Spinner

You can also use a spinner.

import { Spinner } from 'react-progress-ui'

<Spinner />

The spinner is an SVG image element. If you want to adjust its size, just set a height prop with the number of your choosing. No need to worry about setting the width, as the width should automatically scale with the height.

<Spinner height={45} />