add Progress UI

add Progress UI

components/progress/progress.vue

@@ -1,5 +1,10 @@
 <template>
     <div :class="wrapClasses">
+        <div :class="outerClasses">
+            <div :class="innerClasses">
+                <div :class="bgClasses" :style="bgStyle"></div>
+            </div>
+        </div>
         <span v-if="!hideInfo" :class="textClasses">
             <slot>
                 <span v-if="isStatus" :class="textInnerClasses">
@@ -10,11 +15,6 @@
                 </span>
             </slot>
         </span>
-        <div :class="outerClasses">
-            <div :class="innerClasses">
-                <div :class="bgClasses" :style="bgStyle"></div>
-            </div>
-        </div>
     </div>
 </template>
 <script>
@@ -53,10 +53,10 @@
                 let type = '';
                 switch (this.status) {
                     case 'wrong':
-                        type = 'ios-close-empty';
+                        type = 'ios-close';
                         break;
                     case 'success':
-                         type = 'ios-checkmark-empty';
+                         type = 'ios-checkmark';
                         break;
                 }
 

local/routers/tag.vue

@@ -5,21 +5,42 @@
         <Button @click="finish">finish</Button>
         <Button @click="error">error</Button>
         <Button @click="update">update</Button>
+        <br><br>
+        <Progress :percent="25"></Progress>
+        <Progress :percent="45" status="success"></Progress>
+        <Progress :percent="45" status="active"></Progress>
+        <Progress :percent="65" status="wrong"></Progress>
+        <Progress :percent="100"></Progress>
+        <Progress :percent="25" hide-info></Progress>
+        <Progress :percent="percent"></Progress>
+        <Button-group size="large">
+            <Button icon="ios-plus-empty" @click="add"></Button>
+            <Button icon="ios-minus-empty" @click="minus"></Button>
+        </Button-group>
+        <Progress :percent="25" :stroke-width="5"></Progress>
+        <Progress :percent="100">
+            <Icon type="checkmark-circled"></Icon>
+            <span>成功</span>
+        </Progress>
     </div>
 </template>
 <script>
-    import { Tag, LoadingBar, Button } from 'iview';
+    import { Tag, LoadingBar, Button, Progress, Icon } from 'iview';
+    const ButtonGroup = Button.Group;
     export default {
         components: {
             Tag,
-            Button
+            Button,
+            Progress,
+            ButtonGroup,
+            Icon
         },
         props: {
         
         },
         data () {
             return {
-            
+                percent: 0
             }
         },
         computed: {
@@ -40,13 +61,19 @@
             },
             update () {
                 LoadingBar.update(50);
+            },
+            add () {
+                if (this.percent >= 100) {
+                    return false;
+                }
+                this.percent += 10;
+            },
+            minus () {
+                if (this.percent <= 0) {
+                    return false;
+                }
+                this.percent -= 10;
             }
-        },
-        ready () {
-            LoadingBar.start();
-            setTimeout(function () {
-                LoadingBar.finish();
-            }, 2000)
         }
     }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/index.less

@@ -14,4 +14,5 @@
 @import "switch";
 @import "input-number";
 @import "tag";
-@import "loading-bar";
+@import "loading-bar";
+@import "progress";

styles/components/progress.less

@@ -0,0 +1,87 @@
+@progress-prefix-cls: ~"@{css-prefix}progress";
+
+.@{progress-prefix-cls} {
+    display: inline-block;
+    width: 100%;
+    font-size: 14px;
+    position: relative;
+
+    &-outer {
+        display: inline-block;
+        width: 100%;
+        margin-right: 0;
+        padding-right: 0;
+
+        .@{progress-prefix-cls}-show-info & {
+            padding-right: 55px;
+            margin-right: -55px;
+        }
+    }
+
+    &-inner {
+        display: inline-block;
+        width: 100%;
+        background-color: #f3f3f3;
+        border-radius: 100px;
+        vertical-align: middle;
+    }
+
+    &-bg {
+        border-radius: 100px;
+        background-color: @info-color;
+        .transition(all @transition-time linear);
+        position: relative;
+    }
+
+    &-text {
+        display: inline-block;
+        margin-left: 5px;
+        text-align: left;
+        font-size: 1em;
+        vertical-align: middle;
+    }
+
+    &-active {
+        .@{progress-prefix-cls}-bg:before {
+            content: '';
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #fff;
+            border-radius: 10px;
+            .animation(ivu-progress-active 2s @ease-in-out infinite);
+        }
+    }
+
+    &-wrong {
+        .@{progress-prefix-cls}-bg {
+            background-color: @error-color;
+        }
+        .@{progress-prefix-cls}-text {
+            color: @error-color;
+        }
+    }
+
+    &-success {
+        .@{progress-prefix-cls}-bg {
+            background-color: @success-color;
+        }
+        .@{progress-prefix-cls}-text {
+            color: @success-color;
+        }
+    }
+}
+
+@keyframes ivu-progress-active {
+    0% {
+        opacity: .3;
+        width: 0;
+    }
+    100% {
+        opacity: 0;
+        width: 100%;
+    }
+}