Merge pull request #103 from Leopoldthecoder/next

update loading

examples/nav.config.json

@@ -30,36 +30,36 @@
         {
           "path": "/message-box",
           "name": "弹框 (message-box)",
-          "title": "message-box 弹框"
+          "title": "Message Box 弹框"
         },
         {
           "path": "/alert",
           "name": "警告 (alert)",
-          "title": "alert 警告",
+          "title": "Alert 警告",
           "description": "用于页面中展示重要的提示信息"
         },
         {
           "path": "/notification",
           "name": "通知 (notification)",
-          "title": "notification 通知",
+          "title": "Notification 通知",
           "description": "悬浮出现在页面右上角, 显示全局的通知提醒消息"
         },
         {
           "path": "/message",
           "name": "消息提示 (message)",
-          "title": "message 消息提示",
+          "title": "Message 消息提示",
           "description": "对用户的操作进行反馈提示,包含成功、反馈或错误等消息提示"
         },
         {
           "path": "/loading",
           "name": "加载 (loading)",
-          "title": "loading 加载",
+          "title": "Loading 加载",
           "description": "加载数据时显示"
         },
         {
           "path": "/card",
           "name": "卡片 (card)",
-          "title": "card 卡片",
+          "title": "Card 卡片",
           "description": "将信息聚合在卡片容器中展示"
         }
       ]

packages/loading/src/directive.js

@@ -1,3 +1,4 @@
+import Spinner from './spinner';
 exports.install = Vue => {
   let insertDom = (parent, directive, binding) => {
     if (!directive.domVisible) {
@@ -32,21 +33,13 @@ 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 = (new Spinner()).el;
       el.spinnerStyle = {
-        color: '#ddd',
-        fontSize: '32px',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        marginTop: '-19px',
-        marginLeft: '-16px',
-        zIndex: '10001'
+        position: 'absolute'
       };
     },
 

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;

packages/theme-default/src/index.css

@@ -9,6 +9,7 @@
 @import "./radio.css";
 @import "./switch.css";
 @import "./dropdown.css";
+@import "./loading.css";
 @import "./dialog.css";
 @import "./table.css";
 @import "./pagination.css";

packages/theme-default/src/loading.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;
+  }
+}