update the master branch to the latest

src/components/loading-bar/index.js

@@ -0,0 +1,116 @@
+import LoadingBar from './loading-bar';
+
+let loadingBarInstance;
+let color = 'primary';
+let duration = 800;
+let failedColor = 'error';
+let height = 2;
+let timer;
+
+function getLoadingBarInstance () {
+    loadingBarInstance = loadingBarInstance || LoadingBar.newInstance({
+        color: color,
+        failedColor: failedColor,
+        height: height
+    });
+
+    return loadingBarInstance;
+}
+
+function update(options) {
+    let instance  = getLoadingBarInstance();
+
+    instance.update(options);
+}
+
+function hide() {
+    setTimeout(() => {
+        update({
+            show: false
+        });
+        setTimeout(() => {
+            update({
+                percent: 0
+            });
+        }, 200);
+    }, duration);
+}
+
+function clearTimer() {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+}
+
+export default {
+    start () {
+        if (timer) return;
+
+        let percent = 0;
+
+        update({
+            percent: percent,
+            status: 'success',
+            show: true
+        });
+
+        timer = setInterval(() => {
+            percent += Math.floor(Math.random () * 3 + 1);
+            if (percent > 95) {
+                clearTimer();
+            }
+            update({
+                percent: percent,
+                status: 'success',
+                show: true
+            });
+        }, 200);
+    },
+    update (percent) {
+        clearTimer();
+        update({
+            percent: percent,
+            status: 'success',
+            show: true
+        });
+    },
+    finish () {
+        clearTimer();
+        update({
+            percent: 100,
+            status: 'success',
+            show: true
+        });
+        hide();
+    },
+    error () {
+        clearTimer();
+        update({
+            percent: 100,
+            status: 'error',
+            show: true
+        });
+        hide();
+    },
+    config (options) {
+        if (options.color) {
+            color = options.color;
+        }
+        if (options.duration) {
+            duration = options.duration;
+        }
+        if (options.failedColor) {
+            failedColor = options.failedColor;
+        }
+        if (options.height) {
+            height = options.height;
+        }
+    },
+    destroy () {
+        clearTimer();
+        let instance = getLoadingBarInstance();
+        loadingBarInstance = null;
+        instance.destroy();
+    }
+};

src/components/loading-bar/loading-bar.js

@@ -0,0 +1,39 @@
+import LoadingBar from './loading-bar.vue';
+import Vue from 'vue';
+
+LoadingBar.newInstance = properties => {
+    const _props = properties || {};
+
+    const Instance = new Vue({
+        data: _props,
+        render (h) {
+            return h(LoadingBar, {
+                props: _props
+            });
+        }
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const loading_bar = Instance.$children[0];
+
+    return {
+        update (options) {
+            if ('percent' in options) {
+                loading_bar.percent = options.percent;
+            }
+            if (options.status) {
+                loading_bar.status = options.status;
+            }
+            if ('show' in options) {
+                loading_bar.show = options.show;
+            }
+        },
+        component: loading_bar,
+        destroy () {
+            document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
+        }
+    };
+};
+
+export default LoadingBar;

src/components/loading-bar/loading-bar.vue

@@ -0,0 +1,90 @@
+<template>
+    <transition name="fade">
+        <div :class="classes" :style="outerStyles" v-show="show">
+            <div :class="innerClasses" :style="styles"></div>
+        </div>
+    </transition>
+</template>
+<script>
+//    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-loading-bar';
+
+    export default {
+        name: 'LoadingBar',
+        props: {
+//            percent: {
+//                type: Number,
+//                default: 0
+//            },
+            color: {
+                type: String,
+                default: 'primary'
+            },
+            failedColor: {
+                type: String,
+                default: 'error'
+            },
+            height: {
+                type: Number,
+                default: 2
+            },
+//            status: {
+//                type: String,
+//                validator (value) {
+//                    return oneOf(value, ['success', 'error']);
+//                },
+//                default: 'success'
+//            },
+//            show: {
+//                type: Boolean,
+//                default: false
+//            }
+        },
+        data () {
+            return {
+                percent: 0,
+//                color: 'primary',
+//                failedColor: 'error',
+//                height: 2,
+                status: 'success',
+                show: false
+            };
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            innerClasses () {
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
+                        [`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
+                    }
+                ];
+            },
+            outerStyles () {
+                return {
+                    height: `${this.height}px`
+                };
+            },
+            styles () {
+                let style = {
+                    width: `${this.percent}%`,
+                    height: `${this.height}px`
+                };
+
+                if (this.color !== 'primary' && this.status === 'success') {
+                    style.backgroundColor = this.color;
+                }
+
+                if (this.failedColor !== 'error' && this.status === 'error') {
+                    style.backgroundColor = this.failedColor;
+                }
+
+                return style;
+            }
+        }
+    };
+</script>