Seeking a solution to fill three bars with varying percentages:
<div class="bars" style="width:0%; background-color: red;">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
The width of the bars changes upon mouseover:
document.addEventListener('mousemove', function (ev) {
var volume = document.getElementsByClassName('.bars')[0],
position = ev.clientX - volume.offsetLeft,
percentage = 100 * position / volume.clientWidth;
volume.style.width = percentage + '%';
});
CSS:
.bars {
height: 100%;
width: 100%;
position: relative;
.bar {
background-color: white;
position: absolute;
bottom: 0;
&.-one {
height: 15px;
width: 9px;
left: 0;
}
&.-two {
height: 20px;
width: 9px;
left: 10px;
}
&.-three {
height: 25px;
width: 9px;
right: 0;
}
}
In essence, each bar should reflect the parent's background color based on mouseover percentage while maintaining spacing and height.
Appreciate any assistance!