@ramonak/react-progress-bar

Progress Bar React Component

---

---

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} />;
};

Examples

Label without "%" at the end

<ProgressBar completed="60">

Max completed value is greater than 100

<ProgressBar completed={180} maxCompleted={200} />

Custom Label

<ProgressBar completed={60} customLabel="Not there yet" />

Custom class names

//styles.scss

.wrapper {
  border: 3px solid blue;
}

.container {
  background-color: pink;
}

.barCompleted {
  background-color: lightblue;
  width: 80%;
}

.label {
  font-size: 20px;
  color: green;
}

import './styles.scss'

...

<ProgressBar
  completed={80}
  className="wrapper"
  barContainerClassName="container"
  completedClassName="barCompleted"
  labelClassName="label"
/>

Props

Name	Type	Default	Description
completed (required)	Number or string		Percentage of completed progress bar value. If a string, the "%" won't be added to the label. See Examples
maxCompleted	number	100	Max possible value of the completed prop
customLabel	string	undefined	Custom label
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
transitionDuration	string	1s	Duration of the width transition
transitionTimingFunction	string: ease, linear, ease-in, ease-out, ease-in-out	ease-in-out	Timing function of the width transition
animateOnRender	boolean	false	Should the bar width be animated on the first render
initCompletedOnAnimation	string or number	0	Initial completed value (e.g. the width of the completed bar) on animation start (applies only when animateOnRender is true)
className	string		Add a className to the parent div (see example)
barContainerClassName	string		Add a className to the container div (see example)
completedClassName	string		Add a className to the completed part of the bar (see example)
labelClassName	string		Add a className to the bar label (see example)
dir	string: ltr, rtl, auto	ltr	Progressbar HTML direction
ariaValuemin	number	0	accessibility: Defines the minimum allowed value for a range
ariaValuemax	number	100	accessibility: Defines the maximum allowed value for a range
ariaValuetext	number	null	accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed)
customLabelStyles	CSS.Properties		custom CSS properties for a label

License

MIT © KaterinaLupacheva