← 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 ]

<progress-bar>

Name: progress-bar
Availability: InStock
Author: samuelli

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

**[ 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`

GitHub Homepage
License
Issue tracker

progress-bar version 1.0.0
### Dependencies Polymer/polymer#^1.4.0

progress-bar version 1.0.1
### Dependencies Polymer/polymer#^1.4.0

progress-bar version 1.0.2
### Dependencies

progress-bar version 1.0.3
### Dependencies

progress-bar version 1.0.4
### Dependencies

progress-bar version 2.0.0
### Dependencies

progress-bar version 2.0.1
### Dependencies