pretty-progressbar

A generic React component which renders a responsive and slick progress bars. It provides 4 type of progress bars with options to customize them accordingly.

Getting Started

npm i pretty-progressbar --save-dev 

or

npm install pretty-progressbar --save-dev 

Usage - Example 1

import React from 'react';
import { render } from 'react-dom';
import PrettyProgressbar from 'pretty-progressbar';

class App extends React.Component {
 render() {
        return (
           <PrettyProgressbar 
                 percentage="41" 
                 type='default' 
                 label={true}/>
        )
    }
}

render(
    <App/>, document.getElementById('root')
)

Usage - Example 2 (With Custom Styles)

import React from 'react';
import { render } from 'react-dom';
import PrettyProgressbar from 'pretty-progressbar';

class App extends React.Component {
 render() {
        let progressBarStyle = {
            'display' : 'inline-block',
            'margin' : '9px'
        }

        let progressStyle = {
            'background' : 'indianred'
        }

        return (
           <PrettyProgressbar 
                 percentage="81"
                 type='circle' 
                 label={true}
                 progressbarStyle={progressBarStyle} 
                 progressStyle={progressStyle}/>
        )
    }
}

render(
    <App/>, document.getElementById('root')
)

Props

Name | Required | Type | Description | -------------------|----------|----------|------------------------------------------------------------------------ percentage | Yes | number | Progress from 0 to 100. Default 0 label | No | boolean | Which shows percentage on the progress bar (true/false) - Default false type | No | string | Which defines type of progress bar (default/circle/cyclinder/square) - Default progressbarStyle | No | object | Style object for the progressbar wrapper (container) progressStyle | No | object | Style object for the progress (content)

Author

Krishcdbry ([email protected])

Demo

Click here @https://krishcdbry.github.io/pretty-progressbar/demo/

Licence

MIT @krishcdbry