hastebrot / progress-bar

Lightweight vanilla JS horizontal loading bar

<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