简单地效果图如下：
CSS实现进度条：
html结构：
XML/HTML Code复制内容到剪贴板
<divid="progress"><span>70%</span></div>css样式：
CSS Code复制内容到剪贴板
#progress{width:50%;height:30px;border:1pxsolid#ccc;border-radius:15px;margin:50px00100px;overflow:hidden;box-shadow:005px0px#dddinset;}#progressspan{display:inline-block;width:70%;height:100%;background:#2989d8;background:-moz-linear-gradient(45deg,#2989d833%,#7db9e834%,#7db9e859%,#2989d860%);background:-webkit-gradient(linear,leftbottombottom,rightrighttop,color-stop(33%,#2989d8),color-stop(34%,#7db9e8),color-stop(59%,#7db9e8),color-stop(60%,#2989d8));background:-webkit-linear-gradient(45deg,#2989d833%,#7db9e834%,#7db9e859%,#2989d860%);background:-o-linear-gradient(45deg,#2989d833%,#7db9e834%,#7db9e859%,#2989d860%);background:-ms-linear-gradient(45deg,#2989d833%,#7db9e834%,#7db9e859%,#2989d860%);background:linear-gradient(45deg,#2989d833%,#7db9e834%,#7db9e859%,#2989d860%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2989d8',endColorstr='#2989d8',GradientType=1);background-size:60px30px;text-align:center;color:#fff;}
对于进度条，其中的进度颜色也可以是纯色，若想要用渐变的话，可以到此网站：http://www.colorzilla.com/gradient-editor/ ，这样完成渐变效果就变得非常简单，跟用PS的操作是一样一样的。将背景设置为渐变后，还需要设置background-size，这样才能实现重复效果：
css实现订单进度条：
html结构：
XML/HTML Code复制内容到剪贴板
<divid="progressBar"><!--进度条--><div><span></span></div><!--五个圆--><span></span><span></span><span></span><span></span><span></span></div>css样式:
CSS Code复制内容到剪贴板
#progressBar{width:80%;height:50px;position:relative;margin:50px00100px;}#progressBardiv{width:100%;height:10px;position:absolute;top:50%;left:0;margin-top:-20px;border:1pxsolid#ddd;background:#ccc;}#progressBardivspan{position:absolute;display:inline-block;background:green;height:10px;width:25%;}#progressBar>span{position:absolute;top:0;margin-top:-10px;width:40px;height:40px;border:2pxsolid#ddd;border-radius:50%;background:green;margin-left:-20px;color:#fff;}#progressBar>span:nth-child(1){left:0%;}#progressBar>span:nth-child(2){left:25%;background:green;}#progressBar>span:nth-child(3){left:50%;background:#ccc;}#progressBar>span:nth-child(4){left:75%;background:#ccc;}#progressBar>span:nth-child(5){left:100%;background:#ccc;}然后用JS就能实现动态的进度条啦！
PS：CSS样式没怎么优化，然后调试CSS代码时发现第一个圆的样式不起作用，所以才将默认背景色改成绿色，希望能帮我解决这个小BUG
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
原文出处：http://www.cnblogs.com/jr1993/p/4598630.html
