react-animated-progress
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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

    NPM JavaScript Style Guide

    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.

    License

    MIT © ashwinKumar0505

    Install

    npm i react-animated-progress

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • ashwinkumar0505