纯CSS实现动态进度条

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <title>'</title>
  5 </head>
  6 <style type="text/css">
  7   #main{
  8      300px;
  9     height: 30px;
 10     background: #ccc;
 11   }
 12 
 13   #sub{
 14     
 15     animation: removef 2s ease-in;
 16     -webkit-animation:removef 2s ease-in;
 17     background: #aacc33;
 18     height: 100%;
 19      80%;
 20   }
 21 
 22   @keyframes removef{
 23     0% { 0%;}
 24     100% { 80%;}
 25 
 26   }
 27   @-webkit-keyframes removef{
 28      0% { 0%;}
 29      100% { 80%;}
 30   }
 31 
 32      #progress{
 33    50%;
 34   height: 30px;
 35   border:1px solid #ccc;
 36   border-radius: 15px;
 37   margin: 50px 0 0 100px;
 38   overflow: hidden;
 39   box-shadow: 0 0 5px 0px #ddd inset;
 40 }
 41 #progress span {
 42   display: inline-block;
 43    80%;
 44   height: 100%;
 45   background: #2989d8;
 46   text-align: center;
 47   color:#fff;
 48   -webkit-animation:load 3s ease-in;
 49 }
 50 @-webkit-keyframes load{
 51   0%{
 52      0%;
 53   }
 54   100%{
 55     80%;
 56   }
 57 }
 58 
 59 .circleProgress_wrapper{
 60    200px;
 61   height: 200px;
 62   margin: 50px auto;
 63   position: relative;
 64   border:1px solid #ddd;
 65 }
 66 .wrapper{
 67    100px;
 68   height: 200px;
 69   position: absolute;
 70   top:0;
 71   overflow: hidden;
 72 }
 73 .right{
 74   right:0;
 75 }
 76 .left{
 77   left:0;
 78 }
 79 .circleProgress{
 80    160px;
 81   height: 160px;
 82   border:20px solid rgb(232, 232, 12);
 83   border-radius: 50%;
 84   position: absolute;
 85   top:0;
 86   -webkit-transform: rotate(45deg);
 87 }
 88 .rightcircle{
 89   border-top:20px solid green;
 90   border-right:20px solid green;
 91   right:0;
 92   -webkit-animation: circleProgressLoad_right 5s linear infinite;
 93 }
 94 .leftcircle{
 95   border-bottom:20px solid green;
 96   border-left:20px solid green;
 97   left:0;
 98   -webkit-animation: circleProgressLoad_left 5s linear infinite;
 99 }
100 @-webkit-keyframes circleProgressLoad_right{
101   0%{
102     border-top:20px solid #ED1A1A;
103     border-right:20px solid #ED1A1A;
104     -webkit-transform: rotate(45deg);
105   }
106   50%{
107     border-top:20px solid rgb(232, 232, 12);
108     border-right:20px solid rgb(232, 232, 12);
109     border-left:20px solid rgb(81, 197, 81);
110     border-bottom:20px solid rgb(81, 197, 81);
111     -webkit-transform: rotate(225deg);
112   }
113   100%{
114     border-left:20px solid green;
115     border-bottom:20px solid green;
116     -webkit-transform: rotate(225deg);
117   }
118 }
119 @-webkit-keyframes circleProgressLoad_left{
120   0%{
121     border-bottom:20px solid #ED1A1A;
122     border-left:20px solid #ED1A1A;
123     -webkit-transform: rotate(45deg);
124   }
125   50%{
126     border-bottom:20px solid rgb(232, 232, 12);
127     border-left:20px solid rgb(232, 232, 12);
128     border-top:20px solid rgb(81, 197, 81);
129     border-right:20px solid rgb(81, 197, 81);
130     -webkit-transform: rotate(45deg);
131   }
132   100%{
133     border-top:20px solid green;
134     border-right:20px solid green;
135     border-bottom:20px solid green;
136     border-left:20px solid green;
137     -webkit-transform: rotate(225deg);
138   }
139 }
140 </style>
141 <body>
142 <div id="main">
143   <div id="sub"></div>
144 </div>
145 <div id="progress">
146   <span></span>
147 </div>
148 
149 <div class="circleProgress_wrapper">
150         <div class="wrapper right">
151             <div class="circleProgress rightcircle"></div>
152         </div>
153         <div class="wrapper left">
154             <div class="circleProgress leftcircle"></div>
155         </div>
156  </div>
157     
158 </body>
159 </html>