new loader.Review by: @梁志锋

@@ -15,7 +15,11 @@ var $loading,
 
 
 // 初始化
 // 初始化
 function init($container) {
 function init($container) {
-    var html = '<div class="loading-mask hide"><div class="loading"></div></div>';
+    var html = '<div class="loading-mask hide">' +
+                    '<div class="loading">' +
+                        '<div></div><div></div><div></div>' +
+                    '</div>' +
+               '</div>';
 
 
     hasInit = true;
     hasInit = true;
     if ($container === undefined) {
     if ($container === undefined) {

@@ -5,16 +5,73 @@
     bottom: 0;
     bottom: 0;
     right: 0;
     right: 0;
     left: 0;
     left: 0;
+
+    @-webkit-keyframes scale {
+        0% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+            opacity: 1;
+        }
+
+        45% {
+            -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+            opacity: 0.7;
+        }
+
+        80% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes scale {
+        0% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+            opacity: 1;
+        }
+
+        45% {
+            -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+            opacity: 0.7;
+        }
+
+        80% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
     
     
     .loading {
     .loading {
         position: absolute;
         position: absolute;
-        width: 100rem / $pxConvertRem;
-        height: 40rem / $pxConvertRem;
-        background: image-url('loading.gif') no-repeat;
-        background-size: 100% 100%;
+        width: 60px;
+        height: 20px;
         top: 50%;
         top: 50%;
         left: 50%;
         left: 50%;
-        margin-left: -50rem / $pxConvertRem;
-        margin-top: -20rem / $pxConvertRem;
+        margin-top: -10px;
+        margin-left: -30px;
+
+        > div {
+            display: inline-block;
+            background: #fff;
+            width: 15px;
+            height: 15px;
+            @include border-radius(100%);
+            margin: 2px;
+
+            $init: 0.12;
+            @for $i from 1 through 3 {
+                &:nth-child(#{$i}) {
+                    -webkit-animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
+                    animation: scale .75s #{$init}s infinite cubic-bezier(.2,.68,.18,1.08);
+                }
+
+                $init: ($i + 1) * 0.12;
+            }
+        }
     }
     }
 }
 }