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>Use the disable attribute to let the progress bar finish gracefully instead of abruptly.
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 |