超简单：纯CSS实现的进度条
——————纯CSS实现的进度条——————
HTML：
1 <div class="wrapper"> 2 <div class="bar"> 3 <p class="text"> 4 数据处理中。。。</p> 5 </div> 6 </div>
CSS：
1 /***********- 加载进度条 -***********/ 2 .wrapper { 3 position:absolute; 4 top:290px; 5 left:225px; 6 overflow: hidden; 7 width: 350px; 8 margin: 0 auto; 9 display:none; 10 z-index: 102; 11 } 12 13 .bar { 14 border: solid 1px #e3e3e3; 15 margin: 40px 30px; 16 padding: 8px 0; 17 height: 25px; 18 } 19 20 .text { 21 font-size: 12px; 22 margin-top:-3px ; 23 text-align: center; 24 text-transform: uppercase; 25 } 26 27 .text-gradient { 28 width: 100%; 29 font-size: 22px; 30 font-weight: bold; 31 text-align: center; 32 color: #94f17c; 33 background: -webkit-linear-gradient(left, #000, #94f17c); 34 -webkit-background-clip: text; 35 -webkit-text-fill-color: transparent; 36 } 37 38 .bar { 39 background: #94f17c; 40 background: -webkit-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%); 41 background: -moz-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%); 42 background: -o-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%); 43 background: -ms-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%); 44 background: linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%); 45 background-size: 200% 200%; 46 -webkit-animation: AnimationName 1s ease infinite; 47 } 48 @-webkit-keyframes AnimationName { 49 0% { 50 background-position: 100% 0%; 51 } 52 100% { 53 background-position: 0% 0%; 54 } 55 } 56 .bar .text { 57 background: #94f17c; 58 background: -webkit-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); 59 background: -moz-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); 60 background: -o-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); 61 background: -ms-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); 62 background: linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); 63 background-size: 200% 200%; 64 -webkit-animation: AnimationName 1s ease infinite; 65 -webkit-background-clip: text; 66 -webkit-text-fill-color: transparent; 67 } 68 @-webkit-keyframes AnimationName { 69 0% { 70 background-position: 100% 0%; 71 } 72 100% { 73 background-position: 0% 0%; 74 } 75 }
