Code Doodle: a gradient progress bar

A simple doodling project – probably not that useful, but I enjoyed creating it 🤷

I liked the way Wendover Productions displayed the HDI score in their video „The News You Missed in 2021”, so of course I decided to create a widget like this for VueJS 😅 Check out the associated blog post to read the code explained.

Slider

Move the slider around and observe changes in the widget.

0
<AvrisProgressBar :value="v"/>

Static preview 

<AvrisProgressBar v-for="i in 26" :value="(i - 1) * 40"/>

Custom colours: 

<AvrisProgressBar v-for="i in 26" :value="(i - 1) * 40"
    :colours="['#000000', '#ff0000', '#ce80ea', '#00ff00', '#ffffff']"
    style="--apb-border-width: 1px;"/>