This web component creates a highly configurable progress element.

Demo here: https://codepen.io/annoyingmouse/pen/rNZZGMj

Usage

<wc-progress></wc-progress>
<script type="module" src="wc-progress.js"></script>

Configuration

The progress bar's appearance and behaviour can be changed using attributes.

Adding a height number variable will change the height of the progress bar from the default of 20px.

Adding a start hex colour variable will change the start colour of the progress bar from the default of #FF0000.

Adding a middle hex colour variable will change the middle colour of the progress bar from the default of #FF9900.

Adding a end hex colour variable will change the end colour of the progress bar from the default of #33FF00.

Adding the progress number variable will change the width of the progress bar.