slim-progress-bar

Slim progress bar reusable component in reactjs

Usage no npm install needed!

<script type="module">
  import slimProgressBar from 'https://cdn.skypack.dev/slim-progress-bar';
</script>

README

Slim Progress Bar

This is the reusable component of slim progress bar created by using following technologies-

  1. Reactjs
  2. Styled components

Useage:

npm install slim-progress-bar

import Progress from 'slim-progress-bar';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state={
      percent:10
    }
  }
  render() {
    return (
      <Progress position="top" percent={this.state.percent}  id="pageTop"/> 
    );
  }
}

API

Props

name type default description
percent number 0 it set the width of the progress bar
position string 'top' it set the position of the progress bar ['top', 'bottom', 'left', 'right'
color String #007cba it set the color of the progress bar in different ways 1) #007cba 2) red 3) rgb(0, 0, 255)
progressType string 'header-level it set type of progress bar 1) header-level(position:fixed) 2) block-level (position:absolute)
height number 4px Set the height of progress bar for position top and bottom
width number 4px set the width of progress bar for position left and right
id string set the id that helps in testing