Progress bar that changes width AND color using a CSS variable

dabblet.css

/**
 * Progress bar that changes width AND color using a CSS variable
 */

div {
	display: flex;
	height: .8em;
	margin: 1em 0;
	background: hsl(220,10%,80%);
}

div::before {
	content: "";
	width: calc(var(--value) * 100%);
	background: hsl(calc(var(--value) * 90), 50%, 50%);
}

dabblet.html

<div class="progress" style="--value: .02"></div>
<div class="progress" style="--value: .1"></div>
<div class="progress" style="--value: .3"></div>
<div class="progress" style="--value: .5"></div>
<div class="progress" style="--value: .7"></div>
<div class="progress" style="--value: .9"></div>
<div class="progress" style="--value: 1"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}