Skip to content

KaterinaLupacheva/react-progress-bar

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

@ramonak/react-progress-bar

Progress Bar React Component

NPM npm bundle sizeGitHubnpm


demo


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

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

License

MIT © KaterinaLupacheva