Loading

@@ -100,15 +100,19 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 
 <h2>loading</h2>
 可以控制显示，隐藏
+<p>
+  <a href="javascript:void(0);" id="loading">显示</a>
+</p>
+
 
 <h2>modal</h2>
 支持 一个按钮，两个按钮，多个按钮
 每个按钮支持自定义事件
 <p>
-  <button href="javascript:void(0);" id="modal-overlay">显示覆盖层</button>
-  <button href="javascript:void(0);" id="modal-alert">Alert</button>
-  <button href="javascript:void(0);" id="modal-confirm">Confirm</button>
-  <button href="javascript:void(0);" id="modal-custom">自定义</button>
+  <a href="javascript:void(0);" id="modal-overlay">显示覆盖层</a>
+  <a href="javascript:void(0);" id="modal-alert">Alert</a>
+  <a href="javascript:void(0);" id="modal-confirm">Confirm</a>
+  <a href="javascript:void(0);" id="modal-custom">自定义</a>
 </p>
 
 

+<div class="loading">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+/**
+ * 加载组件
+ *
+ * @author: Aiden Xu <aiden.xu@yoho.cn>
+ * @date: 2016/07/18
+ */
+
+'use strict';
+
+const Overlay = require('./overlay');
+const template = require('./loading.hbs');
+
+if (!Overlay) {
+    throw new Error('Required dependency "Overlay" not found!');
+}
+
+class Loading {
+    constructor(opts) {
+        this.defaults = {};
+        this.settings = Object.assign({}, this.defaults, opts);
+
+        this.elem = $(template());
+
+        this.elem.appendTo('body');
+    }
+
+    /**
+     * 显示
+     */
+    show() {
+        this.overlay = $.overlay({
+            animation: 'fade',
+            clickToClose: false
+        });
+        this.overlay.show();
+    }
+
+    /**
+     * 关闭
+     */
+    hide() {
+        this.overlay.hide();
+        this.elem.remove();
+    }
+}
+
+((function($) {
+    $.loading = opts => {
+        return new Loading(opts);
+    };
+})(jQuery));
+
+module.exports = Loading;

@@ -87,17 +87,6 @@ class Modal {
             });
 
             modal.show();
-        }
-    });
-
-    $.extend($.modal, {
-        alert: (text, title)=> {
-            const modal = $.modal({
-                text: text,
-                title: title
-            });
-
-            modal.show();
         },
         confirm: (text, title, callback)=> {
             const modal = $.modal({

 /**
  * Modal 覆盖层组件
  *
- * @author: aiden.xu<aiden.xu@yoho.cn>
+ * @author: Aiden Xu<aiden.xu@yoho.cn>
  * @date: 2016/07/18
  */
 
 'use strict';
 
 const ANIMATIONS = {
+    none: {
+        in: 'overlay-in',
+        out: 'overlay-out'
+    },
     fade: {
         in: 'overlay-fade-in',
         out: 'overlay-fade-out'

@@ -43,6 +43,7 @@ $('#hbs-placeholder').html(tpl({
 var overlay = require('../common/overlay');
 var modal = require('../common/modal');
 var customModal = require('../../hbs/example/custom-modal.hbs');
+var loading = require('../common/loading');
 
 $('#modal-overlay').click(()=> {
     var overlay = $.overlay();
@@ -87,4 +88,12 @@ $('#modal-custom').click(()=> {
 });
 
 
+$('#loading').click(()=> {
+    const loading = $.loading();
+    loading.show();
+    setTimeout(()=> {
+        loading.hide();
+    }, 3000)
+});
+
 /* eslint-enable */

@@ -9,3 +9,4 @@
 @import "badge";
 @import "form";
 @import "modal";
+@import "loading";

+@keyframes loading-scale {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    45% {
+        transform: scale(0.1);
+        opacity: 0.7;
+    }
+
+    80% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.loading {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -60px;
+    width: 128px;
+    height: 40px;
+    z-index: 1001;
+
+    > div {
+        $init: 0.12;
+
+        @for $i from 1 to 3 {
+            &:nth-child($i) {
+                animation: loading-scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+            }
+
+            $init: calc(($i + 1) * 0.12);
+        }
+
+        display: inline-block;
+        margin: 4px;
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+        background: #fff;
+    }
+}

@@ -17,3 +17,13 @@
     opacity: 0;
     transition: opacity 0.1s linear;
 }
+
+.overlay-in {
+    opacity: 0.5;
+    transition: opacity 0.1s linear;
+}
+
+.overlay-out {
+    opacity: 0;
+    transition: opacity 0.1s linear;
+}