MS REACT PROGRESS BAR

🎉 Standalone Customizable React Progress bar

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 | |

License

Licensed under MIT