diff --git a/examples/routers/progress.vue b/examples/routers/progress.vue
index f3ea67ed..05afcc2b 100644
--- a/examples/routers/progress.vue
+++ b/examples/routers/progress.vue
@@ -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>
diff --git a/src/styles/components/progress.less b/src/styles/components/progress.less
index 4ed13cde..f0d8cc75 100644
--- a/src/styles/components/progress.less
+++ b/src/styles/components/progress.less
@@ -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%;
+    }
+}