@ramonak/react-progress-bar NPM

@ramonak/react-progress-bar

Progress Bar React Component

npm bundle size GitHub npm

demo

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

example1

<ProgressBar completed="60">

Max completed value is greater than 100

example1

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

Custom Label

example1

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

Custom class names

example1

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