Merge pull request #642 in VISUAL/fineui from ~ZHENFEI.LI/fineui:master to master

* commit '2d922779ba374f1b1435e323cdec2f8664b1bae7':
  BI-30745 精简语句，调整最小高度（+30px）
  BI-30745 操控class来实现ie hack
  BI-30745 使用js判断是否ie来兼容低版本ie
  BI-30745 将css animation相关的less mixin移到visual.less文件中
  BI-30745 对于css3的animation的浏览器兼容前缀问题，定义less
  BI-30745 根据caniuse网站查询的兼容性，增加浏览器兼容前缀
  替换gif，使用css animation实现组件loading加载动画

src/base/pane.js

@@ -50,30 +50,46 @@ 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" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""),
+            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.absolute_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",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._loading,

src/less/base/pane.less

@@ -1,6 +1,34 @@
 @import "../index";
-
+@import "../resource/background";
 .bi-pane {
-  min-height: 25px;
-  .background-color(@color-bi-background-normal, 0);
+    min-height: 55px;
+    .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));
+        }
+    });
+    &.hack {
+        .loading-background;
+        div {
+            .background-color(@background-color-highlight, 0%);
+        }
+    }
 }

src/less/visual.less

@@ -255,3 +255,46 @@
     transform: rotate(-45deg);
   }
 }
+
+// css3 animation
+.keyframes(@name, @frames) {
+  @-webkit-keyframes @name {
+      @frames();
+  }
+  @-moz-keyframes @name {
+      @frames();
+  }
+  @-ms-keyframes @name {
+      @frames();
+  }
+  @-o-keyframes @name {
+      @frames();
+  }
+  @keyframes @name {
+      @frames();
+  }
+}
+
+.animation(@attr) {
+  -webkit-animation: @attr;
+  -moz-animation: @attr;
+  -ms-animation: @attr;
+  -o-animation: @attr;
+  animation: @attr;
+}
+
+.animation-delay(@attr) {
+  -webkit-animation-delay: @attr;
+  -moz-animation-delay: @attr;
+  -ms-animation-delay: @attr;
+  -o-animation-delay: @attr;
+  animation-delay: @attr;
+}
+
+.transform(@attr) {
+  -webkit-transform: @attr;
+  -moz-transform: @attr;
+  -o-transform: @attr;
+  -ms-transform: @attr;
+  transform: @attr;
+}