Browse Source

替换gif,使用css animation实现组件loading加载动画

es6
Zhenfei.Li 6 years ago
parent
commit
5fcfc1651b
  1. 38
      src/base/pane.js
  2. 23
      src/less/base/pane.less

38
src/base/pane.js

@ -50,27 +50,43 @@ BI.Pane = BI.inherit(BI.Widget, {
loading: function () { loading: function () {
var self = this, o = this.options; 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 (o.overlap === true) {
if (!BI.Layers.has(this.getName())) { if (!BI.Layers.has(this.getName())) {
BI.createWidget({ BI.createWidget({
type: "bi.vtape", type: "bi.center_adapt",
items: [{ items: [{
el: { el: loadingAnimation
type: "bi.layout",
cls: "loading-background"
},
height: 30
}], }],
element: BI.Layers.make(this.getName(), this) element: BI.Layers.make(this.getName(), this)
}); });
} }
BI.Layers.show(self.getName()); BI.Layers.show(self.getName());
} else if (BI.isNull(this._loading)) { } else if (BI.isNull(this._loading)) {
this._loading = BI.createWidget({ this._loading = loadingAnimation;
type: "bi.layout",
cls: "loading-background",
height: 30
});
this._loading.element.css("zIndex", 1); this._loading.element.css("zIndex", 1);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",

23
src/less/base/pane.less

@ -3,4 +3,27 @@
.bi-pane { .bi-pane {
min-height: 25px; min-height: 25px;
.background-color(@color-bi-background-normal, 0); .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);
}
}
} }
Loading…
Cancel
Save