I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fact that the "inner bar" descends from the top instead of ascending from the bottom. One solution could be to subtract the percentage from 100 and take the absolute value, but that feels like a bit of a hack. I would much rather discover how to align this at the bottom and have it "grow" upwards as the height increases, rather than starting at the top and growing downwards.
CSS Code
.cssSmall .performanceBack
{
position: absolute;
z-index: 1;
height: 20px;
width: 18px;
top: 4px;
left: 81%;
background-color: Brown;
}
.cssSmall .performanceBar
{
font-size: 6px;
vertical-align: top;
background-color: Orange;
}
Javascript code
this.performanceBack = gDocument.createElement("performanceBack");
this.performanceBack.className = "performanceBack";
div.appendChild(this.performanceBack);
this.performanceBar = document.createElement('div');
this.performanceBar.className = 'performanceBar';
//Hard coded value for testing
this.performanceBar.style.height = '30%';
this.performanceBack.appendChild(this.performanceBar);
Thanks.