Question

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

Answer 1

		.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

Answer 2

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