Ms-react-progress-bar NPM

MS REACT PROGRESS BAR

🎉 Standalone Customizable React Progress bar NPM Downloads NPM License

ms-react-progress

Installation

npm install --save ms-react-progress-bar
yarn add ms-react-progress-bar

Features

Easy to set up
Super easy to customize
You can control the progress bar
Set your own maximum percentage
And much more !

Basic Usage

  import React from 'react';

  import { ProgressBar } from 'ms-react-progress-bar';
  import 'ms-react-progress-bar/dist/ProgressBar.css';
  
  function App(){

    return (
      <div>
        <ProgressBar value={40} />
      </div>
    );
  }

Adding Options

  import React from 'react';
  import { ProgressBar } from 'ms-react-progress-bar';
  import 'ms-react-progress-bar/dist/ProgressBar.css';
  
  function App(){
      const options = {
          height: "30px",
          borderRadius: "20px",
          labelSize: "14px",
          barColor: "#2c43ac",
          containerColor: "#dddddd",
          containerStyle: "border",
          stripeAnimation: true,
          stripeAnimationDuration: '20s',
          type: "striped",
      }
      return (
          <div>
              <ProgressBar value={80} options={options} />
          </div>
      );
  }

Demo

Examples

Documentation

Getting Started Guide

Props

Props	Description	Default
value	Number in percentage showing current progress	0
options	Progress Bar Options to help you customize	0

Options

Option	Description	Default
type	Specify the type of progress bar. you can choose between regular, striped	regular
maxValue	Maximum value in percentage showing end of progress. (number)	100
height	Height of Progress Bar in px	15px
borderRadius	The border radius of progress Bar in px	10px
barColor	The hex color of the inner bar which show the current progress	#2c43ac
stripeAnimation	Toggle striped animation on and off. should set type as "striped"	false
stripeAnimationDuration	Duration of stripe animation in seconds	10s
containerStyle	Style of the outer container you can choose between bg,border,none	bg
containerColor	Color of the outer container	#dddddd
labelAlignment	The alignment of the label choose between left, center, right	left
labelSize	Font size of label	12px
labelVisibility	Toggle label on or off	true
labelColor	Color of label	white
customLabel	Add your own custom label