I did a percentage bar with css But I want write label with the number in percentage in it or beside it when I write it change
CSS code:
#progressbar {
background-color: #999;
border-radius: 10px; /* (height of inner div) / 2 + padding */
padding: 0.5px;
max-width:150px;
font-size: 9px;
}
#progressbar > div {
background-color:red;
/* Adjust with JavaScript */
height: 10px;
border-radius: 10px;
max-width:150px;
font-size: 12px;
}
and in body
echo" Excellent <div id="."progressbar".">
<div style="."width:".(($ex*150)/100)."px;".">".$ex."%</div>
</div>";
How can I want write a word beside it?
Let me know if I can improve it :)
#progressbar {
background-color: #999;
border-radius: 10px;
/* (height of inner div) / 2 + padding */
padding: 0.5px;
max-width: 150px;
font-size: 9px;
position: relative;
}
#progressbar > div {
background-color: red;
/* Adjust with JavaScript */
height: 10px;
border-radius: 10px;
max-width: 150px;
font-size: 12px;
}
#progressbar span {
position: absolute;
width: 100%;
text-align: center;
}<div id="progressbar">
<span>Excellent</span>
<div style="width:100px;"></div>
</div>UPDATE: (request for text alongside the progress bar)
#progressbar {
background-color: #999;
border-radius: 10px;
/* (height of inner div) / 2 + padding */
padding: 0.5px;
max-width: 150px;
font-size: 9px;
width: 100px;
display: inline-block;
}
#progressbar > div {
background-color: red;
/* Adjust with JavaScript */
height: 10px;
border-radius: 10px;
font-size: 12px;
}
#progressBarContainer span {
display: inline-block;
}<div id="progressBarContainer">
<div id="progressbar">
<div style="width:50%;"></div>
</div>
<span>Excellent</span>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments