超简单：纯CSS实现的进度条

——————纯CSS实现的进度条——————

HTML：

 <div class="wrapper">
         <div class="bar">
             <p class="text">
                 数据处理中。。。</p>
         </div>
     </div>

CSS：

 /***********-  加载进度条  -***********/
 .wrapper {
   position:absolute;
   top:290px;
   left:225px;
   overflow: hidden;
   width: 350px;
   margin: 0 auto;
   display:none;
   z-index:;
 }

 .bar {
   border: solid 1px #e3e3e3;
   margin: 40px 30px;
   padding: 8px 0;
   height: 25px;
 }

 .text {
   font-size: 12px;
   margin-top:-3px ;
   text-align: center;
   text-transform: uppercase;
 }

 .text-gradient {
   width: 100%;
   font-size: 22px;
   font-weight: bold;
   text-align: center;
   color: #94f17c;
   background: -webkit-linear-gradient(left, #000, #94f17c);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .bar {
   background: #94f17c;
   background: -webkit-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%);
   background: -moz-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%);
   background: -o-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%);
   background: -ms-linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%);
   background: linear-gradient(left, #94f17c 0%, #94f17c 50%, #fff 50%, #fff 100%);
   background-size: 200% 200%;
   -webkit-animation: AnimationName 1s ease infinite;
 }
 @-webkit-keyframes AnimationName {
   0% {
     background-position: 100% 0%;
   }
   100% {
     background-position: 0% 0%;
   }
 }
 .bar .text {
   background: #94f17c;
   background: -webkit-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%);
   background: -moz-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%);
   background: -o-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%);
   background: -ms-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%);
   background: linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%);
   background-size: 200% 200%;
   -webkit-animation: AnimationName 1s ease infinite;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 @-webkit-keyframes AnimationName {
   0% {
     background-position: 100% 0%;
   }
   100% {
     background-position: 0% 0%;
   }
 }