Directory

← Back

progress-bar

Lightweight vanilla JS horizontal loading bar

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/samuelli/progress-bar on 2018-12-05 ]

Published on webcomponents.org

<progress-bar>

progress-bar is a vanilla indeterminate progress bar with no dependencies that is smaller than 2KB.

<progress-bar></progress-bar>
<progress-bar class="salmon"></progress-bar>
<progress-bar class="fast"></progress-bar>

Finish gracefully

Use the disable attribute to let the progress bar finish gracefully instead of abruptly.

API reference

Disable the progress element using the hidden attribute.

Custom property Description Default
--progress-bar-color Color of the progress bar #37A0CE
--progress-bar-duration Duration of the animation 2s
--progress-bar-delay Delay before the animation begins 0s

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2017-05-11
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent

progress-bar - Vaadin Add-on Directory

Lightweight vanilla JS horizontal loading bar progress-bar - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/samuelli/progress-bar](https://github.com/samuelli/progress-bar/blob/v2.0.1/README.md) on 2018-12-05 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/samuelli/progress-bar) # \ `progress-bar` is a vanilla indeterminate progress bar with no dependencies that is smaller than 2KB. ```html ``` ## Finish gracefully Use the `disable` attribute to let the progress bar finish gracefully instead of abruptly. ## API reference Disable the progress element using the `hidden` attribute. Custom property | Description | Default -------------------------------------------------|---------------------------------------------|-------------- `--progress-bar-color ` | Color of the progress bar | `#37A0CE` `--progress-bar-duration` | Duration of the animation | `2s` `--progress-bar-delay` | Delay before the animation begins | `0s`
Online