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>