Loading: improve visual, add custom text

packages/loading/src/directive.js

@@ -1,4 +1,6 @@
-import Spinner from './spinner';
+import Vue from 'vue';
+let Spinner = Vue.extend(require('./spinner.vue'));
+
 exports.install = Vue => {
   let toggleLoading = (el, binding) => {
     if (binding.value) {
@@ -88,11 +90,18 @@ exports.install = Vue => {
       el.maskStyle = {
         position: 'absolute',
         zIndex: '10000',
-        backgroundColor: 'rgba(0, 0, 0, .65)',
+        backgroundColor: 'rgba(255, 255, 255, .9)',
         margin: '0'
       };
 
-      el.spinner = (new Spinner()).el;
+      let spinner = new Spinner({
+        data: {
+          text: el.getAttribute('element-loading-text'),
+          fullScreen: !!binding.modifiers.fullscreen
+        }
+      });
+      spinner.$mount(el.mask);
+      el.spinner = spinner.$el;
       el.spinnerStyle = {
         position: 'absolute'
       };

packages/loading/src/spinner.js

@@ -1,16 +0,0 @@
-import { addClass } from 'wind-dom/src/class';
-
-class Spinner {
-  constructor() {
-    let spinner = document.createElement('div');
-    addClass(spinner, 'el-loading-spinner');
-    [1, 2, 3].forEach(index => {
-      let bubble = document.createElement('div');
-      addClass(bubble, `el-loading-bubble bubble${ index }`);
-      spinner.appendChild(bubble);
-    });
-    this.el = spinner;
-  }
-}
-
-export default Spinner;

packages/loading/src/spinner.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="el-loading-spinner"
+    :class="{ 'is-full-screen': fullScreen }">
+    <svg class="circular" viewBox="25 25 50 50">
+      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-miterlimit="10"/>
+    </svg>
+    <p v-if="text" class="el-loading-text">{{ text }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        text: null,
+        fullScreen: false
+      };
+    }
+  };
+</script>

packages/theme-default/src/common/var.css

@@ -539,4 +539,9 @@
   --datepicker-inrange-hover-color: #AFDCFF;
   --datepicker-active-color: var(--color-primary);
   --datepicker-text-hover-color: #20a0ff;
+
+  /* Loading
+  --------------------------*/
+  --loading-spinner-size: 42px;
+  --loading-fullscreen-spinner-size: 64px;
 }

packages/theme-default/src/loading.css

@@ -1,44 +1,62 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
 .el-loading-spinner {
-  height: 12px;
-  width: 60px;
   top: 50%;
-  left: 50%;
-  font-size: 0;
+  margin-top: calc(- var(--loading-spinner-size) / 2);
+  width: 100%;
   text-align: center;
-  margin-top: -6px;
-  margin-left: -30px;
-  z-index: 10001;
-}
 
-.el-loading-bubble {
-  height: 12px;
-  width: 12px;
-  background-color: #fff;
-  margin: 0 3px;
-  border-radius: 50%;
-  display: inline-block;
-  animation: 1s cubic-bezier(.2,.68,.18,1.08) infinite both bubble-pulse;
-}
-
-.el-loading-bubble.bubble1 {
-  animation-delay: .16s;
-}
-
-.el-loading-bubble.bubble2 {
-  animation-delay: .32s;
-}
-
-.el-loading-bubble.bubble3 {
-  animation-delay: .48s;
-}
-
-@keyframes bubble-pulse {
-  0%, 80% {
-    transform: scale(1);
-    opacity: 1;
+  .el-loading-text {
+    color: var(--color-primary);
+    margin: 3px 0;
+    font-size: 16px;
   }
-  45% {
-    transform: scale(0);
-    opacity: 0;
+
+  .circular {
+    width: var(--loading-spinner-size);
+    animation: rotate 2s linear infinite;
   }
-}
+
+  .path {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: var(--color-primary);
+    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke-linecap: round;
+  }
+
+  @when full-screen {
+    margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
+
+    .circular {
+      width: var(--loading-fullscreen-spinner-size);
+    }
+
+    .path {
+      stroke-width: 3;
+    }
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 45, 100;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 45, 100;
+    stroke-dashoffset: -124px;
+  }
+}