纯CSS实现圆形进度条 - 旅鸟

时间：2024-02-23 07:22:37

纯CSS实现圆形进度条

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         <title>Css Demo</title>
 6         <link rel="stylesheet" href="style.css" />
 7         <script>
 8             function setProgressValue(id, val)
 9             {
10                 var progress = document.getElementById(id);
11                 var masker = progress.getElementsByClassName(\'progress_masker\');
12                 var value = progress.getElementsByClassName(\'progress_value\');
13                 if(masker.length>0)
14                 {
15                     masker[0].style.marginTop = "" + val + "%";
16                 }
17                 if(value.length>0)
18                 {
19                     value[0].innerHTML = "" + (100 - val) + "%";
20                 }
21             }
22         </script>
23     </head>
24     <body onLoad="setProgressValue(\'progress\', 20);">
25         <div id="content">
26             <div id="progress">
27                 <div class="progress_value"></div>
28                 <div class="progress_outer">  
29                        <div class="progress_inner">
30                         <div class="progress_masker">
31                         </div>
32                     </div>
33                 </div> 
34             <div>
35         </div>
36     </body>
37 </html>
 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。

相关文章