使用 CSS 在进度条上显示进度条的值（数字），例如 55%答案

【问题标题】：Show a progress bar's value (number) like 55% on the bar by using CSS使用 CSS 在进度条上显示进度条的值（数字），例如 55%
【发布时间】：2015-11-27 20:05:07
【问题描述】：

我想在 body 上显示进度条的值以及颜色。

我确实尝试使用下面的代码，但没有成功。有什么方法可以在进度条主体或进度标签/元素上显示进度百分比。

<progress  max="100" value="26"></progress><br/>
<progress  max="100" value="26">26%</progress><br/>
<progress  max="100" value="26"><span>26%</span></progress>

【问题讨论】：

你有任何 javascript 来为进度条设置动画吗？
想要jsfiddle.net/qfwTy

标签： html css

【解决方案1】：

您可以为每个progress元素添加一个伪元素，并使用attr() CSS function将value属性显示为伪元素的内容：

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>

【讨论】：

Plus 1 很好的答案，但它不适用于 Firefox v42。
@AnonymousXD 有趣。感谢您指出了这一点。我想知道这是一个错误，还是只是一个不受支持的功能。我找到了this related question。

【解决方案2】：

在这里查看：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>

【讨论】：

【解决方案3】：

<progress id="progressBar" value="50" max="100" align="center" style="width:400px;"></progress>

progress#progressBar:before {
    display: inline;
    content: "%" attr(value);
}

【讨论】：

...不知道这与我两年前发布的答案有何不同...