Progress Bar React Component (build with Typescript)
npm install --save @ramonak/react-progress-bar
import React from "react";
import ProgressBar from "@ramonak/react-progress-bar";
const Example = () => {
return <ProgressBar completed={60} />;
};
Name | Type | Default | Description |
---|---|---|---|
completed (required) |
Number between 0 and 100 or string. |
Percentage of completed progress bar value. If string, it will be bar label and the bar will be fully completed |
|
bgcolor |
string |
#6a1b9a |
Color of the completed bar |
height |
string |
20px |
Height of the bar |
width |
string |
100% |
Width of the bar |
margin |
string |
Margin | |
padding |
string |
Padding | |
borderRadius |
string |
50px |
Border radius of the bar |
baseBgColor |
string |
#e0e0de |
Color of the "non-completed" bar |
labelAlignment |
string: left, center, right, outside |
right |
Position of the label inside the completed bar or outside bar |
labelColor |
string |
#fff |
Color of the label text |
labelSize |
string |
15px |
Font-size of the label text |
isLabelVisible |
boolean |
true |
Visibility of the label |
MIT © KaterinaLupacheva