From 5fcfc1651bcdcd5226277d524486de139e3fafec Mon Sep 17 00:00:00 2001
From: "Zhenfei.Li" <Zhenfei.Li@fanruan.com>
Date: Mon, 27 Aug 2018 16:10:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2gif=EF=BC=8C=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8css=20animation=E5=AE=9E=E7=8E=B0=E7=BB=84=E4=BB=B6loa?=
 =?UTF-8?q?ding=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/base/pane.js        | 38 +++++++++++++++++++++++++++-----------
 src/less/base/pane.less | 23 +++++++++++++++++++++++
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/base/pane.js b/src/base/pane.js
index 9f36eff2a..5a5e202dd 100644
--- a/src/base/pane.js
+++ b/src/base/pane.js
@@ -50,27 +50,43 @@ BI.Pane = BI.inherit(BI.Widget, {
 
     loading: function () {
         var self = this, o = this.options;
+        var loadingAnimation = BI.createWidget({
+            type: "bi.horizontal",
+            cls: "bi-loading-widget",
+            height: 60,
+            width: 60,
+            hgap: 10,
+            vgap: 5,
+            items: [{
+                type: "bi.layout",
+                cls: "rect1",
+                height: 50,
+                width: 5
+            }, {
+                type: "bi.layout",
+                cls: "rect2",
+                height: 50,
+                width: 5
+            }, {
+                type: "bi.layout",
+                cls: "rect3",
+                height: 50,
+                width: 5
+            }]
+        });
         if (o.overlap === true) {
             if (!BI.Layers.has(this.getName())) {
                 BI.createWidget({
-                    type: "bi.vtape",
+                    type: "bi.center_adapt",
                     items: [{
-                        el: {
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
+                        el: loadingAnimation
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } else if (BI.isNull(this._loading)) {
-            this._loading = BI.createWidget({
-                type: "bi.layout",
-                cls: "loading-background",
-                height: 30
-            });
+            this._loading = loadingAnimation;
             this._loading.element.css("zIndex", 1);
             BI.createWidget({
                 type: "bi.absolute",
diff --git a/src/less/base/pane.less b/src/less/base/pane.less
index fa9dcf2fc..be55d2f28 100644
--- a/src/less/base/pane.less
+++ b/src/less/base/pane.less
@@ -3,4 +3,27 @@
 .bi-pane {
   min-height: 25px;
   .background-color(@color-bi-background-normal, 0);
+}
+
+.bi-loading-widget {
+  &>div {
+      .background-color(@background-color-highlight, 90%);
+      .border-radius(2.5px);
+      animation: loading-widget 0.8s infinite linear;
+  }
+  & .rect2 {
+      animation-delay: -0.2s;
+  }
+  & .rect3 {
+      animation-delay: -0.4s;
+  }
+
+  @keyframes loading-widget {
+      0%, 100% {
+          transform: scaleY(0.3);
+      }
+      50% {
+          transform: scaleY(1);
+      }
+  }
 }
\ No newline at end of file