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