Awesome
preact-progress ![NPM](https://img.shields.io/npm/v/preact-progress.svg)
Simple and lightweight (~590 bytes gzip) progress bar component; for :atom_symbol: Preact
Demo
Install
$ npm install --save preact-progress
:exclamation: Pro Tip: Use Yarn to install dependencies 3x faster than NPM!
<script src="https://unpkg.com/preact-progress@1.0.0/dist/preact-progress.min.js"></script>
Usage
Provide a value
; everything else is optional.
import { h } from 'preact';
import Progress from 'preact-progress';
onChange = (ctx, val) => console.log(`${val}% complete`);
onComplete = ctx => {ctx.base.style.opacity = 0};
<Progress
id="loader" className="loader"
value={ 16.3 } height="3px" color="#6cc644"
onChange={ onChange }
onComplete={ onComplete }
/>
Properties
value
Type: Number
<br>
Default: 0
<br>
The current progress; between 0 and 100. Mapped to a style:width
percentage.
onStart
Type: Function
<br>
The callback function when progress bar mounts. Receives the current Progress
component as its first argument & the current value
as its second argument.
onChange
Type: Function
<br>
The callback function whenever the progress value updates. Receives the current Progress
component as its first argument & the current value
as its second argument.
onComplete
Type: Function
<br>
The callback function when progress bar has reached 100%. Receives the current Progress
component as its only argument.
height
Type: String
<br>
Default: 4px
<br>
The height of the animated progress bar.
color
Type: String
<br>
Default: black
<br>
The color of the animated progress bar.
id
Type: String
<br>
Default: none
<br>
The id
attribute to pass down.
className
Type: String
<br>
Default: none
<br>
The className
attribute to pass down. Added to the wrapper element.
License
MIT © Luke Edwards