pretty-progressbar v0.0.8

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

Author

Krishcdbry (krishcdbry@gmail.com)

Demo

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

Licence

MIT @krishcdbry