So I am making an incremental game with JavaScript, HTML5, and CSS, I need to have this bar that is essentially a div
with a p
element in it "fill up" as the player earns more points through sacrifice. All the ways I saw to do this on Google required other CSS code that messed up the spacing and such of my whole page.
Here is a non-functioning idea of how it should look. I basically need the Div
to fill with any color behind the p
element:
function expCalc(){
var expC = exp;
var expN = expC + clickCount + modif;
exp = exp + expN;
getElementById("exp").innerHTML = exp;
}
div#ovvw-c{
float: center;
border: 3px solid green;
width: 3.3%;
height: 50%;
text-align: center;
margin-top:1%;
margin-left:49.25%;
margin-bottom: 1%;
background-color: rgba(255, 255, 255, .5);
}
.pbar{
transform: rotate(270deg);
margin-right:4px;
margin-top:250px;
text-align:center;
font-size:20px;
font-weight:900;
}
<div id="ovvw-c">
<p class="pbar">Hatchling:<span id="exp">0</span>/<span id="expMax">100</span></p>
</div>
I understand that my coding is probably sub-par so any constructive criticisms would be appreciated but my main question is how to turn the div
into a progress bar with minimal changes to size/spacing/CSS in general. Thanks!