https://github.com/enjikaka/progress-bar
Web components progress bar
https://github.com/enjikaka/progress-bar
music progress-bar web-animations-api web-components
Last synced: about 1 month ago
JSON representation
Web components progress bar
- Host: GitHub
- URL: https://github.com/enjikaka/progress-bar
- Owner: enjikaka
- License: unlicense
- Created: 2018-06-08T21:56:45.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-02-18T15:39:22.000Z (over 1 year ago)
- Last Synced: 2025-02-18T15:48:55.733Z (over 1 year ago)
- Topics: music, progress-bar, web-animations-api, web-components
- Language: TypeScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ``
A small 60 FPS smooth progress bar. Usig the Web Animation API.
## API
### Inputs
| Method | Description | Related media event |
| --- | --- | --- |
| `set duration` | Set the duration of the animation. | [`durationchange`](https://developer.mozilla.org/en-US/docs/Web/Events/durationchange) |
| `set playbackRate` | Set the playbackRate of the animation. | [`ratechange`](https://developer.mozilla.org/en-US/docs/Web/Events/ratechange) |
| `start()` | Start the animation. | [`play`](https://developer.mozilla.org/en-US/docs/Web/Events/play) |
| `stop()` | Stop the animation. | [`pause`](https://developer.mozilla.org/en-US/docs/Web/Events/pause) / [`ended`](https://developer.mozilla.org/en-US/docs/Web/Events/ended) |
### Outputs
| CustomEvent | Description | event.detail keys |
| --- | --- | --- |
| `progress-bar:seek` | Sends the position to seek to in percent. | `percent`
## Other useful information
The colour of the progress is styled by the `currentColor` CSS variable. That means that the parent of `` controls the colour of the progress via its `color` prop in CSS.
## Usage
The progress bar fills to it's provided width and height.
```html
```
```js
const $progressBar = document.querySelector('progress-bar');
const $audio = document.querySelector('audio');
$audio.addEventListener('durationchange', e => {
$progressBar.duration = e.target.duration;
}, false);
$audio.addEventListener('playing', () => $progressBar.start(), false);
$audio.addEventListener('pause', () => $progressBar.stop(), false);
$audio.addEventListener('waiting', () => $progressBar.stop(), false);
$audio.addEventListener('seeked', () => {
if (!$audio.paused) {
$progressBar.start();
}
}, false);
$audio.addEventListener('seeking', () => $progressBar.stop(), false);
```