This web component creates a highly configurable progress element.
Demo here: https://codepen.io/annoyingmouse/pen/rNZZGMj
<wc-progress></wc-progress>
<script type="module" src="wc-progress.js"></script>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.