al3rez / react-progress-bar

Simple React progress bar component

@ramonak/react-progress-bar

Progress Bar React Component (build with Typescript)

---

---

Playground / Code Generator

---

Install

npm install --save @ramonak/react-progress-bar

Usage

import React from 'react';

import ProgressBar from '@ramonak/react-progress-bar';

const Example = () => {
    return <ProgressBar completed={60}/>
};

Props

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

License

MIT © KaterinaLupacheva