ProgressBar

A basic ProgressBar component that should render nicely on any platform. Supports a good level of customization.

You can customization ProgressBar component with the Props

Usage#

Linear ProgressBar#

import React, {FC, useState} from 'react';
import {Body,ProgressBar} from 'qdmrncomponents';

const App: FC = () => {

  return (
    <Body paddingAll={20} V_Aligin_center>
       <ProgressBar
            linearProgressBarWidth={100}
            linearProgressBarActive={70}
            type="linear"
      />
    </Body>
  );
};

Circular ProgressBar#

import React, {FC, useState} from 'react';
import {Body,ProgressBar} from 'qdmrncomponents';

const App: FC = () => {

  return (
    <Body paddingAll={20} V_Aligin_center>
       <ProgressBar
          type="circular"
          circularBarSize={100}
          circularBarProgressPercantage={50}
        />
    </Body>
  );
};

Reference#

type#

type props is used to select the type (linear or circular)

Props for Linear ProgressBar#

linearProgressBarWidth#

linearProgressBarWidth props for changing width of the linear progress bar and its type number

linearProgressBarActive#

linearProgressBarActive props for the percentage number of the linear progress bar and its type number

linearProgressBarColor#

linearProgressBarColor props for the inactive color of linear progress bar and its type string

linearProgressBarActiveColor#

linearProgressBarActiveColor props for the active color of linear progress bar and its type string

Props for Circular ProgressBar#

circularBarSize#

circularBarSize props for the size of the circular progress bar and its type number

circleWidth#

circleWidth props for the circular progress bar thickness and its type number

circleActiveColor#

circleActiveColor props for the active progress bar circle and type string

circleInActiveColor#

circleInActiveColor props for the inactive progress bar circle and type string

circularBarProgressPercantage#

circularBarProgressPercantage props for the percentage number for circular bar and type number between (0 to 100)

fontSize#

props for changing font size of the percentage Text and type number

fontColor#

props for changing font color of the percentage Text and type string

fontWeight#

props for changing font weight of the percentage Text and type string-'bold'

inlineStyle#

props give addition props to the Button element type Object