你是要做个什么样子的，只要是进度条就行呢，还是要他能动起来
，要是只是个样式的话，网上多的很，要动起来的话，需要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的宽度和文字的显示即可。1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----
2.难点分析
圆角边框，内阴影，
渐变填充实现斜纹效果
斜纹动画
3.实现步骤
a.html架构
<div class="progressBar blue stripes">
<span></span>
</div>
<div class="progressBar orange stripes">
<span></span>
</div>
b.进度条母条.progressBar的实现
.progressBar{
margin: 50px auto
padding: 5px
width: 360px
height: 20px
background-color: #1a1a1a
border-radius: 4px
box-shadow: 0 1px 5px #000 inset
}
c.进度条字条span的实现
.progressBar span{
display: inline-block
height: 100%
width: 60%
background-color: #777
border-radius: 3px
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset
transition:all .5s ease
position: relative
z-index: 1
}
.progressBar:hover span{
width: 100%
cursor: pointer
}
d.不同颜色的变化
.blue span{
background-color: #34c2e3
}
.orange span{
background-color: #fecf23
background-image: linear-gradient(top, #fecf23, #fd9215)
}
e.斜条纹实现
.stripes span{
background-size: 30px 30px
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent)
animation: stripesAnimate 1s linear infinite
}
@keyframes stripesAnimate{
0%{background-position:0 0}
100%{background-position: 60px 0}
}
.stripes:hover span{
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent)
}
