11

I want to show the value of a progress bar on the body along with the color.

I did try using the code below but couldn't succeed. Is there any way to show the percentage of progress on the body of the progress bar or progress tag/element.

<progress  max="100" value="26"></progress><br/>
<progress  max="100" value="26">26%</progress><br/>
<progress  max="100" value="26"><span>26%</span></progress>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
harish007
  • 111
  • 1
  • 1
  • 6

3 Answers3

28

You can add a pseudo element to each progress element and use the attr() CSS function to display the value attribute as the content of the pseudo element:

progress {
  text-align: center;
}
progress:after {
  content: attr(value)'%';
}
<progress max="100" value="26"></progress><br/>
<progress max="100" value="50"></progress><br/>
<progress max="100" value="73"><span></span></progress>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 2
    Plus 1 Great answer but it's not working on Firefox v42. – Anonymous Nov 27 '15 at 20:24
  • @AnonymousXD Interesting. Thanks for pointing that out. I wonder whether that's a bug, or just a feature that's not supported. I found [this related question](http://stackoverflow.com/questions/18162649/css-content-attr-on-html5-progress-doesnt-work). – Josh Crozier Nov 27 '15 at 20:27
  • Doesn't work in Safari 16.5 either. – davecom Jun 18 '23 at 03:15
0

Check it out here: https://codepen.io/onlintool24/pen/dyVJrww

var progressval = 55;
var elm = document.getElementsByClassName('progressab')[0];
elm.style.width = progressval+"%";

elm.innerText = "You're "+progressval+"% There!";

if(progressval>90 && progressval<=100 ){   elm.style.backgroundColor = 'blue';                                 
}else if(progressval>50 && progressval<90 ){ elm.style.backgroundColor = 'green';
}else if(progressval<=50){ elm.style.backgroundColor = 'red';
}
.progressa {
    border-radius: 50px !important;
    height: 35px;
    line-height: 36px;
    font-size: 14px;
    overflow: hidden;
    height: 35px;
    margin-bottom: 20px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    line-height: 36px;
    height: 35px;
    font-size: 14px;
    border: 3px solid transparent;
}
.progressab {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    -webkit-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -moz-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -ms-transition: width .25s ease,height .25s ease,font-size .25s ease;
    -o-transition: width .25s ease,height .25s ease,font-size .25s ease;
    transition: width .25s ease,height .25s ease,font-size .25s ease;
    width: 0;
    color: #fff;
    text-align: center;
    font-family: 'Open Sans',sans-serif !important;
    animation: progress-bar-stripes 2s linear infinite reverse;
}

@keyframes progress-bar-stripes{
0% {
    background-position: 40px 0;
}
100% {
    background-position: 0 0;
}
}
<div class="progressa">
<div class="progressab" style="    background-color: rgb(178, 222, 75);"></div>
</div>
Tracy Good
  • 11
  • 3
-3
<progress id="progressBar" value="50" max="100" align="center" style="width:400px;"></progress>

progress#progressBar:before {
    display: inline;
    content: "%" attr(value);
}
Matthew Verstraete
  • 6,335
  • 22
  • 67
  • 123
Adsız
  • 11
  • 1