progress bar active

components/progress/demo/line-mini.md

@@ -15,6 +15,7 @@ var style = {
 React.render(
   <div style={style}>
     <Progress percent="30" strokeWidth="5" />
+    <Progress percent="50" strokeWidth="5" status="active" />
     <Progress percent="70" strokeWidth="5" status="exception" />
     <Progress percent="100" strokeWidth="5" />
   </div>

components/progress/demo/line.md

@@ -12,6 +12,7 @@ var Progress = antd.Progress.Line;
 React.render(
   <div>
     <Progress percent="30" />
+    <Progress percent="50" status="active" />
     <Progress percent="70" status="exception" />
     <Progress percent="100" />
   </div>

style/components/progress.less

@@ -25,7 +25,7 @@
   }
   &-line-bg {
     border-radius: 100px;
-    background-color: @statusNormal;
+    background-color: @primary-color;
   }
   &-line-text {
     position: absolute;
@@ -40,24 +40,38 @@
       font-size: 12px;
     }
   }
+  &-line-wrap.status-active {
+    .@{prefixProgressClass}-line-bg:before {
+      content: "";
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      background: #fff;
+      border-radius: 10px;
+      -webkit-animation: progress-active 2s ease infinite;
+      animation: progress-active 2s ease infinite;
+    }
+  }
   &-line-wrap.status-exception {
     .@{prefixProgressClass}-line-bg {
-      background-color: @statusException;
+      background-color: @error-color;
     }
     .@{prefixProgressClass}-line-text {
-      color: @statusException;
+      color: @error-color;
     }
   }
   &-line-wrap.status-success {
     .@{prefixProgressClass}-line-bg {
-      background-color: @statusSuccess;
+      background-color: @success-color;
     }
     .@{prefixProgressClass}-line-text {
-      color: @statusSuccess;
+      color: @success-color;
     }
   }
 
-
   &-circle-inner {
     position: relative;
     line-height: 1;
@@ -87,3 +101,24 @@
     }
   }
 }
+
+@-webkit-keyframes progress-active {
+  0% {
+    opacity: .3;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}
+@keyframes progress-active {
+  0% {
+    opacity: .3;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}