纯CSS实现圆形进度条

    CSS的优点在于的可以随意组合HTML元素来实现许多中效果，这儿我将使用CSS来实现一个运行进度条，效果如下：

思路是用两个div来作为进度条外观，表示进度的div和外面div宽度和高度保持一致，并是外面的div的overflow为hidden，这样就可以省去内部div超出的部分，然后通过控制内部div的margin-top属性来控制进度条的进度，这些可以在js中来实现。做法还算简单，下面是html和css文件内容：

 1 
 2 
 3     
 4         
 5         
 6         
 7         
23     
24     
25         

26             

27                 

28                 
  
29                        

30                         

31                         
32                     
33                 
 
34             

35         
36     
37 

 1 #progress
 2 {
 3     width:200px;
 4     height:200px;
 5     padding:0;
 6 }
 7 .progress_outer
 8 {
 9     height:100%;
10     width:100%;
11     background-color:gray;
12     border-radius:calc(100%/2);
13     border:5px solid black;
14     padding:0;
15     
16     box-shadow: 0px 2px 4px #555555;
17     -webkit-box-shadow: 0px 2px 4px #555555;
18     -moz-box-shadow: 0px 2px 4px #555555;
19 }
20 
21 .progress_inner
22 {
23     height:100%;
24     width:100%;
25     border:1px solid yellow;
26     border-radius:calc(100%/2);
27     position:relative;
28     background-color:white;
29     overflow:hidden;
30     text-align:center;
31     
32 }
33 
34 .progress_masker
35 {
36     height:100%;
37     width:100%;
38     background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0));
39     background: -moz-linear-gradient( top,#fff,#0f0);
40     background: -o-linear-gradient( top,#fff,#0f0)
41 }
42 
43 .progress_value
44 {
45     width:100%;
46     color:black;
47     font-weight:bolder;
48     background-color:transparent;
49     text-align:center;
50 }

 

因为在css中采用了相对布局，所以要更改进度条的大小只用更改最外层的div的宽度和高度，在这儿就是id为progress的div。

转载于:https://www.cnblogs.com/lvniao/p/3713171.html