怎么用css3做一个进度条中间有文字

怎么用css3做一个进度条中间有文字

可以用动画自己做一个进度条
animation:jindutiao 15s forwards;
@keyframes jindutiao
{
from {width:0px;}
to {width:1000px;}
}2016-11-18

.bar a{position: absolute; left: 50%; top: 50%; margin: -9px -24px; z-index: 21;}.rate{height: 50px;width: 0;position: absolute;background: -webkit-linear-gradient(left, pink , red);}<div class="bar"><div class="rate"></div><a>进度条</a></div><input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="3" class="set-rate" placeholder="设置进度">$('.set-rate').bind('input propertychange', function() { if($('.set-rate').val() <= 100 && $('.set-rate').val() > 0){ $('.rate').width($('.set-rate').val() + '%') $('.rate1').width(5*parseInt($('.set-rate').val())) } else if($('.set-rate').val() > 100){ $('.rate').width('100%'); $('.set-rate').val(100); $('.rate1').width(5*parseInt($('.set-rate').val())) } else { $('.rate').width(0); $('.rate1').width(0); }});用JQ
2016-11-18