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" data-value=".02"></div>
<div class="progress" data-value=".1"></div>
<div class="progress" data-value=".3"></div>
<div class="progress" data-value=".5"></div>
<div class="progress" data-value=".7"></div>
<div class="progress" data-value=".9"></div>
<div class="progress" data-value="1"></div>

dabblet.js

document.querySelectorAll('[data-value]').forEach(element => {
	element.style.setProperty('--value', element.getAttribute('data-value'));
});

settings.json

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