你是要做个什么样子的，只要是进度条就行呢，还是要他能动起来
，要是只是个样式的话，网上多的很，要动起来的话，需要js
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box{ width:300px height:10px border-radius:5px margin-top:20px position:relative background-color:#666}
.box1{ width:0 height:10px border-radius:5px background-color:#0C9 position:absolute left:0 top:0}
input{outline:none color:#ccc}
</style>
</head>
<body>
<label>请输入数字</label>
<input type="text" value="请输入数字" id="val2" onBlur="if(this.value==''){this.value='请输入数字'this.style.color='#ccc'}" onFocus="if(this.value=='请输入数字'){this.value=''this.style.color='#333'}" />
<input type="button" value="提交" id="sub2" style="color:#000" />
<div class="box"><div class="box1" id="box1"></div></div>
<script type="text/javascript">
var val2 = document.getElementById("val2"),
box1 = document.getElementById("box1"),
sub2 = document.getElementById("sub2")
sub2.onclick=function(){
var val = val2.value
if(isNaN(val)){
alert("请输入数字")
return
}else{
if(val>300){
alert("数字不能超过总长度300")
return
}
box1.style.width=val+'px'
}
}
</script>
</body>
</html>
如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。.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
