Progress Element Html Text Inside
Hi there can someone help me with this progress html element I need to be able to put a text value on the right side of the progress and depending the progress if decreases the te
Solution 1:
You should use a custom progress bar or a library that has an option for that. here is an example of a custom progress bar. Use Javascript
to control the width and the content of the before
pseudo-element
.progress{
height:30px;
width:300px;
background-color:orange;
position:relative;
}
.progress::before{
position:absolute;
height:30px;
background:green;
content:'50%';// hrere you should add the text
top:0;
left:0;
width:50%;
display:flex;
color:white;
align-items:center;
justify-content:flex-end;
padding-right:10px;
}
<divclass="progress"></div>
Solution 2:
I have updated the progress bar using pure css. Lets try with this example and comment for further information.
progress {
-webkit-appearance: none;
}
progress::-webkit-progress-bar {
background-color: orange;
}
.progress-barspan {
position: absolute;
display: inline-block;
color: #fff;
text-align: right;
}
.progress-bar {
display: block;
position: relative;
width: 100%;
}
progress {
width: 100%;
}
<divclass="progress-bar"><spandata-value="60"style="width: 60%;">60</span><progressvalue="60"max="100"></progress></div><divclass="progress-bar"><spandata-value="90"style="width: 90%;">90</span><progressvalue="90"max="100"></progress></div>
Solution 3:
You have to use bootstrap latest version and it has in-built css :
Example :
<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet"/><divclass="progress"><divclass="progress-bar"role="progressbar"style="width: 25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100">25%</div></div><br><br><divclass="progress"><divclass="progress-bar"role="progressbar"style="width: 15%"aria-valuenow="15"aria-valuemin="0"aria-valuemax="100">10%</div><divclass="progress-bar bg-success"role="progressbar"style="width: 30%"aria-valuenow="30"aria-valuemin="0"aria-valuemax="100">20%</div><divclass="progress-bar bg-info"role="progressbar"style="width: 20%"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100">30%</div></div>
Solution 4:
You can do it with little bit of js and css. I would personally avoid the progress element cause of cross-browser styling issues.
Third party libraries are good but they come with a significant cost. The bloated css and js are sometimes not worth it.
Hope this helps.
<style>.progress {
width: 100%;
position: relative;
background-color: orange;
}
.bar {
width: 0%;
height: 30px;
background-color: green;
text-align: center;
line-height: 30px;
color: black;
}
.bar-text {
position: absolute;
top: 0;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
color: black;
}
</style><script>functioninit() {
var bar = document.getElementById("bar");
var width = 0;
var id = setInterval(frame, 10);
functionframe() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
bar.style.width = width + '%';
document.querySelector('.bar-text').innerHTML = width * 1 + '%';
}
}
}
</script><divclass="progress"id="progress"><divclass="bar"id="bar"></div><divclass="bar-text">10%</div></div><br><buttononclick="init()">Click Me</button>
Post a Comment for "Progress Element Html Text Inside"