react-progressbar.js

Responsive and slick progress bars for React. Line, Circle and SemiCircle shaped progress bars are provided and their animations are highly [customizable](https://github.com/kimmobrunfeldt/progressbar.js#custom-animations).

This module is a React wrapper for progressbar.js. That's why most of the documentation refers to the original documentation.

Shortcuts

How to install
API documentation
Demos These demos use the original progressbar.js but the options are exactly the same for react-progressbar.js too

Get started

react-progressbar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

How to install

Install the library using npm:

npm install --save react-progressbar.js

Since React users are anyways using a CommonJS module loader, this module is published only in NPM.

Loading module

CommonJS

var ProgressBar = require('react-progressbar.js')
var Circle = ProgressBar.Circle;

How it works

See https://github.com/kimmobrunfeldt/progressbar.js#how-it-works.

API

NOTE: Line, Circle and SemiCircle all point to the same documentation which is named Shape. You almost certainly should replace it(Shape) with Line, Circle or SemiCircle.

Example: if documentation states <Shape />, replace it with <Circle />, simple. Shape is the internal base object for all progress bars.

ProgressBar

Line
Circle
SemiCircle

Important: make sure that your container has same aspect ratio as the SVG canvas. For example: if you are using SemiCircle, set e.g.

#container {
    width: 300px;
    height: 150px;
}

Shape

Line, Circle or SemiCircle shaped progress bar. Appends SVG to container.

Example

var App = React.createClass({
    render: function render() {
        var options = {
            strokeWidth: 2
        };

        // For demo purposes so the container has some dimensions.
        // Otherwise progress bar won't be shown
        var containerStyle = {
            width: '200px',
            height: '200px'
        };

        return (
            <Circle
                progress={this.state.progress}
                text={'test'}
                options={options}
                initialAnimate={true}
                containerStyle={containerStyle}
                containerClassName={'.progressbar'} />
        );
    }
});

With Line shape, you can control the width of the line by specifying e.g. height: 5px with CSS.

Props:

Prop	Description
progress	Progress from 0 to 1. E.g. 67% progress would equal `0.67`. Default `0`.
text	Value for progress bar's text. Default `null`.
options	Options for path drawing. See progressbar.js documentation.
initialAnimate	If `true`, progress bar is animated to given progress when mounted. Default `false`.
containerStyle	Styles for progress bar container. Default `{}`.
containerClassName	Class name for progress bar container. Default `.progressbar-container`.

Contributing

See documentation for contributors.

License

kimmobrunfeldt/react-progressbar.js

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Uh oh!

Contributors 7

Languages

Error
Looks like something went wrong!

Packages