update Progress style

梁灏
1 parent 6e1f8f40
Showing 2 changed files with 24 additions and 0 deletions Show diff stats
examples/routers/progress.vue
src/styles/components/progress.less
@@ -5,6 +5,12 @@
         <Progress vertical :percent="65" status="wrong"></Progress>
         <Progress vertical :percent="100"></Progress>
         <Progress vertical :percent="25" hide-info></Progress>
+
+        <Progress  :percent="25"></Progress>
+        <Progress  :percent="45" status="active"></Progress>
+        <Progress  :percent="65" status="wrong"></Progress>
+        <Progress  :percent="100"></Progress>
+        <Progress  :percent="25" hide-info></Progress>
     </div>
 </template>
 <script>
@@ -89,6 +89,13 @@
         }
     }
+    &-vertical&-active{
+        .@{progress-prefix-cls}-bg:before {
+            top: auto;
+            animation: ivu-progress-active-vertical 2s @ease-in-out infinite;
+        }
+    }
+
     &-wrong {
         .@{progress-prefix-cls}-bg {
             background-color: @error-color;
@@ -118,3 +125,14 @@
         width: 100%;
     }
 }
+
+@keyframes ivu-progress-active-vertical {
+    0% {
+        opacity: .3;
+        height: 0;
+    }
+    100% {
+        opacity: 0;
+        height: 100%;
+    }
+}