Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukeed/preact-progress
Simple and lightweight (~590 bytes gzip) progress bar component for Preact
https://github.com/lukeed/preact-progress
Last synced: 2 months ago
JSON representation
Simple and lightweight (~590 bytes gzip) progress bar component for Preact
- Host: GitHub
- URL: https://github.com/lukeed/preact-progress
- Owner: lukeed
- License: mit
- Created: 2017-02-15T05:43:56.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-15T08:26:08.000Z (almost 8 years ago)
- Last Synced: 2024-10-08T05:47:26.135Z (3 months ago)
- Language: JavaScript
- Homepage: https://jsfiddle.net/lukeed/kws8r5v4/
- Size: 6.84 KB
- Stars: 49
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-preact - Preact Progress - Simple and lightweight (~590 bytes gzip) progress bar component for Preact. (Uncategorized / Uncategorized)
README
# preact-progress [](https://www.npmjs.com/package/preact-progress)
> Simple and lightweight (~590 bytes gzip) progress bar component; for :atom_symbol: [Preact](https://github.com/developit/preact)
#### [Demo](https://jsfiddle.net/lukeed/kws8r5v4/)
## Install
```
$ npm install --save preact-progress
```
> :exclamation: **Pro Tip:** Use [Yarn](https://yarnpkg.com/) to install dependencies 3x faster than NPM!
```html
```
## Usage
Provide a `value`; everything else is optional.
```js
import { h } from 'preact';
import Progress from 'preact-progress';
onChange = (ctx, val) => console.log(`${val}% complete`);
onComplete = ctx => {ctx.base.style.opacity = 0};
```
## Properties
#### value
Type: `Number`
Default: `0`
The current progress; between 0 and 100. Mapped to a `style:width` percentage.
#### onStart
Type: `Function`
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`
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`
The callback function when progress bar has reached 100%. Receives the current `Progress` component as its only argument.
#### height
Type: `String`
Default: `4px`
The height of the animated progress bar.
#### color
Type: `String`
Default: `black`
The color of the animated progress bar.
#### id
Type: `String`
Default: `none`
The `id` attribute to pass down.
#### className
Type: `String`
Default: `none`
The `className` attribute to pass down. Added to the wrapper element.
## License
MIT © [Luke Edwards](https://lukeed.com)