update loading

packages/loading/src/directive.js

@@ -32,20 +32,21 @@ exports.install = Vue => {
       el.maskStyle = {
         position: 'absolute',
         zIndex: '10000',
-        backgroundColor: 'rgba(0, 0, 0, .7)',
+        backgroundColor: 'rgba(0, 0, 0, .65)',
         margin: '0'
       };
 
-      el.spinner = document.createElement('i');
-      el.spinner.className = 'el-icon-loading';
+      el.spinner = document.createElement('img');
+      el.spinner.src = require('./loading-bubbles.svg');
       el.spinnerStyle = {
         color: '#ddd',
-        fontSize: '32px',
+        height: '60px',
+        width: '60px',
         position: 'absolute',
         top: '50%',
         left: '50%',
-        marginTop: '-19px',
-        marginLeft: '-16px',
+        marginTop: '-30px',
+        marginLeft: '-30px',
         zIndex: '10001'
       };
     },

packages/loading/src/loading-bubbles.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <circle transform="translate(8 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(16 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+  <circle transform="translate(24 0)" cx="0" cy="16" r="0"> 
+    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
+      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
+  </circle>
+</svg>