cjs-react-progressbar

React Progress Bar

Usage no npm install needed!

<script type="module">
  import cjsReactProgressbar from 'https://cdn.skypack.dev/cjs-react-progressbar';
</script>

README

React ProgressBar

GitHub license npm version Build Status Coverage Status GitHub issues

Demo

See demo page

Installation

npm i -S cjs-react-progressbar

Import as ES6 module

import { ProgressBar } from 'cjs-react-progressbar';

Usage

<ProgressBar
  progress={25}
  position="top"
  lineColor="green"
  lineHeight={5}
  zIndex={10}
  className="some-class-name"
  customStyles={{ userSelect: 'none' }}
/>

Available options (props)

Option Default Type Description
progress (required) number Set progress (0-100) %
position top string Set progress bar position (top, bottom)
lineColor #77b6ff string Set progress bar color use css color property (hex, rgb, rgba, hsl, hsla)
lineHeight 2 number Set progress bar line height (px)
zIndex 100 number Set progress bar stack order
className (optional) string Add custom class name to progress bar
customStyles (optional) object Add custom css styles or overwrite exiting ones

License

MIT Licensed. Copyright (c) Piotr Sikora 2018.