update loading spinner

packages/loading/src/directive.js

@@ -1,3 +1,5 @@
+import Spinner from './spinner';
+require('./spinner.css');
 exports.install = Vue => {
   let insertDom = (parent, directive, binding) => {
     if (!directive.domVisible) {
@@ -36,18 +38,9 @@ exports.install = Vue => {
         margin: '0'
       };
 
-      el.spinner = document.createElement('img');
+      el.spinner = (new Spinner()).el;
-      el.spinner.src = require('./loading-bubbles.svg');
       el.spinnerStyle = {
-        color: '#ddd',
+        position: 'absolute'
-        height: '60px',
-        width: '60px',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: '-30px',
-        marginLeft: '-30px',
-        zIndex: '10001'
       };
     },
 

packages/loading/src/spinner.css

@@ -0,0 +1,44 @@
+.el-loading-spinner {
+  height: 12px;
+  width: 60px;
+  top: 50%;
+  left: 50%;
+  font-size: 0;
+  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;
+  }
+  45% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}

packages/loading/src/spinner.js

@@ -0,0 +1,14 @@
+class Spinner {
+  constructor() {
+    let spinner = document.createElement('div');
+    spinner.classList.add('el-loading-spinner');
+    [1, 2, 3].forEach(index => {
+      let bubble = document.createElement('div');
+      bubble.classList.add('el-loading-bubble', `bubble${ index }`);
+      spinner.appendChild(bubble);
+    });
+    this.el = spinner;
+  }
+}
+
+export default Spinner;