Package Exports

react-animated-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-animated-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-animated-progress

Progress bar is used to display the progress status for a task that takes a long time or consists of several steps.

Cool and Interactive Progress bar built with react hooks

Install

npm install --save react-animated-progress

Basic Usage

First Import the react-animated-progress component and its default styles. You can provide the value to the progress bar using the value prop. The color of the progress bar can be set using the color prop.

import React, { Component } from 'react'

import ProgressBar from 'react-animated-progress'
import 'react-animated-progress/dist/index.css'

const App = () => {
  return (
    <div>
      <ProgressBar value={20} color='blue' />
    </div>
  )
}

Stripped Progress bar

import React, { Component } from 'react'

import ProgressBar from 'react-animated-progress'
import 'react-animated-progress/dist/index.css'

const App = () => {
  return (
    <div>
      <ProgressBar value={20} color='blue' isStripped={true} />
    </div>
  )
}

Indeterminate Progress bar

import React, { Component } from 'react'

import ProgressBar from 'react-animated-progress'
import 'react-animated-progress/dist/index.css'

const App = () => {
  return (
    <div>
      <ProgressBar value={20} color='blue' isIndeterminate={true} />
    </div>
  )
}

Demo

Check out working demo of progress bar here.