义乌市乾和佳化妆品商行

今天小编跟大家讲解下有关CSS实现进度条和订单进度条 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现进度条和订单进度条 的相关资料，希望小伙伴们看了有所帮助。

简单地效果图如下：

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

来源：爱蒂网