Skip to content

squarecat/react-progressbar.js

 
 

Repository files navigation

react-progressbar.js

Demo animation

Responsive and slick progress bars for React. Line, Circle and SemiCircle shaped progress bars are provided and their animations are highly customizable.

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

Shortcuts

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-progress-bar.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-progress-bar.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

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.

Packages

No packages published

Languages

  • JavaScript 92.8%
  • HTML 3.9%
  • Shell 2.0%
  • CSS 1.3%