<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
:root{
--color:red;
--background-color: {
background-color: color(#fff shade(+80%));
}
}
.css-v{
color: var(--color);
@apply --background-color;
}
</style>
</head>
<body>
<div class="css-v">
-------aspect-ratio-boxes-------
</div>
<div class="">
<input type="button" name="" id="button" value="1111111111" />
</div>
<script type="text/javascript">
window.onload = function(){
function setColor() {
let color = 'blue';
// codes to update loadProgress here
return color;
}
document.getElementById('button').onclick = function(){
document.documentElement.style.setProperty('--color', setColor())
}
}
// Set width of progress bar
</script>
</body>
</html>
