CSS怎么实现进度条和订单进度条

这篇文章主要讲解了“CSS怎么实现进度条和订单进度条 ”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现进度条和订单进度条 ”吧！

简单地效果图如下：
 
 

 
CSS实现进度条：
 
html结构：

XML/HTML Code复制内容到剪贴板

1. <div id="progress">  

2.     <span>70%</span>  

3. </div>    

css样式：

CSS Code复制内容到剪贴板

1. #progress{   

2.     width: 50%;    

3.     height: 30px;   

4.     border:1px solid #ccc;   

5.     border-radius: 15px;   

6.     margin: 50px 0 0 100px;   

7.     overflow: hidden;   

8.     box-shadow: 0 0 5px 0px #ddd inset;   

9. }   

10.   

11. #progress span {   

12.     display: inline-block;   

13.     width: 70%;   

14.     height: 100%;   

15.     background: #2989d8; /* Old browsers */  

16.     background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */  

17.     background: -webkit-gradient(linear, left bottombottom, rightright top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */  

18.     background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */  

19.     background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */  

20.     background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */  

21.     background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */  

22.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

23.     background-size: 60px 30px;   

24.     text-align: center;   

25.     color:#fff;   

26. }    

27.   

对于进度条，其中的进度颜色也可以是纯色，若想要用渐变的话，可以到此网站：http://www.colorzilla.com/gradient-editor/ ，这样完成渐变效果就变得非常简单，跟用PS的操作是一样一样的。将背景设置为渐变后，还需要设置background-size，这样才能实现重复效果： 

css实现订单进度条：
 
html结构：

XML/HTML Code复制内容到剪贴板

1. <div id="progressBar">  

2.      <!-- 进度条 -->  

3.      <div>  

4.          <span></span>  

5.      </div>  

6.      <!-- 五个圆 -->  

7.      <span></span>  

8.      <span></span>  

9.      <span></span>  

10.      <span></span>  

11.      <span></span>  

12. </div>  

css样式:

CSS Code复制内容到剪贴板

1. #progressBar{   

2.     width: 80%;   

3.     height: 50px;   

4.     position: relative;   

5.     margin: 50px 0 0 100px;   

6. }   

7. #progressBar div{   

8.     width: 100%;   

9.     height: 10px;   

10.     position: absolute;   

11.     top:50%;   

12.     left: 0;   

13.     margin-top:-20px;   

14.     border:1px solid #ddd;   

15.     background: #ccc;   

16. }   

17. #progressBar div span{   

18.     position: absolute;   

19.     display: inline-block;   

20.     background: green;   

21.     height: 10px;   

22.     width: 25%;   

23. }   

24. #progressBar>span{   

25.     position: absolute;   

26.     top:0;   

27.     margin-top: -10px;   

28.     width: 40px;   

29.     height: 40px;   

30.     border:2px solid #ddd;   

31.     border-radius: 50%;   

32.     background: green;   

33.     margin-left: -20px;   

34.     color:#fff;   

35. }   

36. #progressBar>span:nth-child(1){   

37.     left: 0%;   

38. }   

39. #progressBar>span:nth-child(2){   

40.     left: 25%;   

41.     background:green;   

42. }   

43. #progressBar>span:nth-child(3){   

44.     left: 50%;   

45.     background:#ccc;   

46. }   

47. #progressBar>span:nth-child(4){   

48.     left: 75%;   

49.     background:#ccc;   

50. }   

51. #progressBar>span:nth-child(5){   

52.     left: 100%;   

53.     background:#ccc;   

54. }   

然后用JS就能实现动态的进度条啦！
 

感谢各位的阅读，以上就是“CSS怎么实现进度条和订单进度条 ”的内容了，经过本文的学习后，相信大家对CSS怎么实现进度条和订单进度条 这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！