Merge branch 'master' of ssh://cloud.finedevelop.com:7999/~young/fineui

dist/base.css

@@ -651,11 +651,476 @@
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
+.farbtastic .wheel {
+  background: url('images/1x/background/wheel.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png');
+  _background: none;
+}
+.farbtastic .overlay {
+  background: url('images/1x/background/mask.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png');
+  _background: none;
+}
+.farbtastic .marker {
+  background: url('images/1x/background/marker.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li ul.line {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full_focus {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full_focus {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full_focus {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full_focus {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree li span.button.root_open {
+  background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
+  _background: none;
+}
+.ztree li span.button.root_close {
+  background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
+  _background: none;
+}
+.ztree li span.button.roots_open {
+  background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
+  _background: none;
+}
+.ztree li span.button.roots_close {
+  background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
+  _background: none;
+}
+.ztree li span.button.center_open {
+  background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
+  _background: none;
+}
+.ztree li span.button.center_close {
+  background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_open {
+  background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
+  _background: none;
+}
+.ztree li span.button.bottom_close {
+  background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
+  _background: none;
+}
+.ztree li span.button.roots_docu {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.ztree li span.button.center_docu {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li span.button.ico_loading {
+  background: url('images/1x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif');
+  _background: none;
+}
+.base-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .base-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.first-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .first-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.mid-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .mid-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.last-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .last-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.loading-background {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background {
+  background: url('images/2x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-background {
+  background: url('images/2x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-disabled-background {
+  background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-background {
+  background: url('images/2x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-disabled-background {
+  background: url('images/2x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background.hack {
+  background: url('images/1x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png');
+  _background: none;
+}
+.auto-color-normal-background.hack {
+  background: url('images/1x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png');
+  _background: none;
+}
+.auto-color-normal-disabled-background.hack {
+  background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png');
+  _background: none;
+}
+.trans-color-background.hack {
+  background: url('images/1x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png');
+  _background: none;
+}
+.trans-color-disabled-background.hack {
+  background: url('images/1x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png');
+  _background: none;
+}
 .bi-pane {
-  min-height: 25px;
+  min-height: 55px;
   background-color: rgba(247, 248, 250, 0);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00f7f8fa,endColorstr=#00f7f8fa);
 }
+.bi-loading-widget div {
+  background-color: rgba(54, 133, 242, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e63685f2,endColorstr=#e63685f2);
+  -webkit-border-radius: 2.5px;
+  -moz-border-radius: 2.5px;
+  border-radius: 2.5px;
+  -webkit-animation: loading-widget 0.8s infinite linear;
+  -moz-animation: loading-widget 0.8s infinite linear;
+  -ms-animation: loading-widget 0.8s infinite linear;
+  -o-animation: loading-widget 0.8s infinite linear;
+  animation: loading-widget 0.8s infinite linear;
+}
+.bi-loading-widget .rect2 {
+  -webkit-animation-delay: -0.2s;
+  -moz-animation-delay: -0.2s;
+  -ms-animation-delay: -0.2s;
+  -o-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.bi-loading-widget .rect3 {
+  -webkit-animation-delay: -0.4s;
+  -moz-animation-delay: -0.4s;
+  -ms-animation-delay: -0.4s;
+  -o-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+@-webkit-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-moz-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-ms-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-o-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+.bi-loading-widget.hack {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.bi-loading-widget.hack div {
+  background-color: rgba(54, 133, 242, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003685f2,endColorstr=#003685f2);
+}
 .bi-segment-button {
   color: #3685f2;
 }

dist/base.js

@@ -251,30 +251,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: {
+                        el: loadingAnimation
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } 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);
             BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._loading,

dist/bundle.css

@@ -2605,11 +2605,476 @@ textarea {
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
+.farbtastic .wheel {
+  background: url('images/1x/background/wheel.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png');
+  _background: none;
+}
+.farbtastic .overlay {
+  background: url('images/1x/background/mask.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png');
+  _background: none;
+}
+.farbtastic .marker {
+  background: url('images/1x/background/marker.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li ul.line {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full_focus {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full_focus {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full_focus {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full_focus {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree li span.button.root_open {
+  background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
+  _background: none;
+}
+.ztree li span.button.root_close {
+  background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
+  _background: none;
+}
+.ztree li span.button.roots_open {
+  background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
+  _background: none;
+}
+.ztree li span.button.roots_close {
+  background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
+  _background: none;
+}
+.ztree li span.button.center_open {
+  background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
+  _background: none;
+}
+.ztree li span.button.center_close {
+  background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_open {
+  background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
+  _background: none;
+}
+.ztree li span.button.bottom_close {
+  background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
+  _background: none;
+}
+.ztree li span.button.roots_docu {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.ztree li span.button.center_docu {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li span.button.ico_loading {
+  background: url('images/1x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif');
+  _background: none;
+}
+.base-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .base-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.first-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .first-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.mid-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .mid-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.last-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .last-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.loading-background {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background {
+  background: url('images/2x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-background {
+  background: url('images/2x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-disabled-background {
+  background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-background {
+  background: url('images/2x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-disabled-background {
+  background: url('images/2x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background.hack {
+  background: url('images/1x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png');
+  _background: none;
+}
+.auto-color-normal-background.hack {
+  background: url('images/1x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png');
+  _background: none;
+}
+.auto-color-normal-disabled-background.hack {
+  background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png');
+  _background: none;
+}
+.trans-color-background.hack {
+  background: url('images/1x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png');
+  _background: none;
+}
+.trans-color-disabled-background.hack {
+  background: url('images/1x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png');
+  _background: none;
+}
 .bi-pane {
-  min-height: 25px;
+  min-height: 55px;
   background-color: rgba(247, 248, 250, 0);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00f7f8fa,endColorstr=#00f7f8fa);
 }
+.bi-loading-widget div {
+  background-color: rgba(54, 133, 242, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e63685f2,endColorstr=#e63685f2);
+  -webkit-border-radius: 2.5px;
+  -moz-border-radius: 2.5px;
+  border-radius: 2.5px;
+  -webkit-animation: loading-widget 0.8s infinite linear;
+  -moz-animation: loading-widget 0.8s infinite linear;
+  -ms-animation: loading-widget 0.8s infinite linear;
+  -o-animation: loading-widget 0.8s infinite linear;
+  animation: loading-widget 0.8s infinite linear;
+}
+.bi-loading-widget .rect2 {
+  -webkit-animation-delay: -0.2s;
+  -moz-animation-delay: -0.2s;
+  -ms-animation-delay: -0.2s;
+  -o-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.bi-loading-widget .rect3 {
+  -webkit-animation-delay: -0.4s;
+  -moz-animation-delay: -0.4s;
+  -ms-animation-delay: -0.4s;
+  -o-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+@-webkit-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-moz-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-ms-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-o-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+.bi-loading-widget.hack {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.bi-loading-widget.hack div {
+  background-color: rgba(54, 133, 242, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003685f2,endColorstr=#003685f2);
+}
 .bi-segment-button {
   color: #3685f2;
 }

dist/bundle.js

@@ -11807,10 +11807,11 @@ _.extend(BI.OB.prototype, {
          * @param force 是否强制挂载子节点
          * @param deep 子节点是否也是按照当前force处理
          * @param lifeHook 生命周期钩子触不触发，默认触发
+         * @param predicate 递归每个widget的回调
          * @returns {boolean}
          * @private
          */
-        _mount: function (force, deep, lifeHook) {
+        _mount: function (force, deep, lifeHook, predicate) {
             var self = this;
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
@@ -11821,9 +11822,10 @@ _.extend(BI.OB.prototype, {
             BI.each(this._children, function (i, widget) {
                 !self.isEnabled() && widget._setEnable(false);
                 !self.isValid() && widget._setValid(false);
-                widget._mount && widget._mount(deep ? force : false, deep, lifeHook);
+                widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
             lifeHook !== false && this.mounted && this.mounted();
+            predicate && predicate(this);
             return true;
         },
 
@@ -12120,11 +12122,11 @@ _.extend(BI.OB.prototype, {
         }
     });
 
-    BI.mount = function (widget, container) {
+    BI.mount = function (widget, container, predicate) {
         if (container) {
             BI.Widget._renderEngine.createElement(container).append(widget.element);
         }
-        return widget._mount(true, false, false);
+        return widget._mount(true, false, false, predicate);
     };
 })();(function () {
     var kv = {};
@@ -35545,30 +35547,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: {
+                        el: loadingAnimation
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } 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);
             BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._loading,

dist/core.js

@@ -11807,10 +11807,11 @@ _.extend(BI.OB.prototype, {
          * @param force 是否强制挂载子节点
          * @param deep 子节点是否也是按照当前force处理
          * @param lifeHook 生命周期钩子触不触发，默认触发
+         * @param predicate 递归每个widget的回调
          * @returns {boolean}
          * @private
          */
-        _mount: function (force, deep, lifeHook) {
+        _mount: function (force, deep, lifeHook, predicate) {
             var self = this;
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
@@ -11821,9 +11822,10 @@ _.extend(BI.OB.prototype, {
             BI.each(this._children, function (i, widget) {
                 !self.isEnabled() && widget._setEnable(false);
                 !self.isValid() && widget._setValid(false);
-                widget._mount && widget._mount(deep ? force : false, deep, lifeHook);
+                widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
             lifeHook !== false && this.mounted && this.mounted();
+            predicate && predicate(this);
             return true;
         },
 
@@ -12120,11 +12122,11 @@ _.extend(BI.OB.prototype, {
         }
     });
 
-    BI.mount = function (widget, container) {
+    BI.mount = function (widget, container, predicate) {
         if (container) {
             BI.Widget._renderEngine.createElement(container).append(widget.element);
         }
-        return widget._mount(true, false, false);
+        return widget._mount(true, false, false, predicate);
     };
 })();(function () {
     var kv = {};

dist/fineui.css

@@ -2605,11 +2605,476 @@ textarea {
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
+.farbtastic .wheel {
+  background: url('images/1x/background/wheel.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png');
+  _background: none;
+}
+.farbtastic .overlay {
+  background: url('images/1x/background/mask.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png');
+  _background: none;
+}
+.farbtastic .marker {
+  background: url('images/1x/background/marker.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li ul.line {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full_focus {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full_focus {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full_focus {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full_focus {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree li span.button.root_open {
+  background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
+  _background: none;
+}
+.ztree li span.button.root_close {
+  background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
+  _background: none;
+}
+.ztree li span.button.roots_open {
+  background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
+  _background: none;
+}
+.ztree li span.button.roots_close {
+  background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
+  _background: none;
+}
+.ztree li span.button.center_open {
+  background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
+  _background: none;
+}
+.ztree li span.button.center_close {
+  background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_open {
+  background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
+  _background: none;
+}
+.ztree li span.button.bottom_close {
+  background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
+  _background: none;
+}
+.ztree li span.button.roots_docu {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.ztree li span.button.center_docu {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li span.button.ico_loading {
+  background: url('images/1x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif');
+  _background: none;
+}
+.base-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .base-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.first-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .first-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.mid-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .mid-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.last-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .last-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.loading-background {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background {
+  background: url('images/2x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-background {
+  background: url('images/2x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-disabled-background {
+  background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-background {
+  background: url('images/2x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-disabled-background {
+  background: url('images/2x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background.hack {
+  background: url('images/1x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png');
+  _background: none;
+}
+.auto-color-normal-background.hack {
+  background: url('images/1x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png');
+  _background: none;
+}
+.auto-color-normal-disabled-background.hack {
+  background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png');
+  _background: none;
+}
+.trans-color-background.hack {
+  background: url('images/1x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png');
+  _background: none;
+}
+.trans-color-disabled-background.hack {
+  background: url('images/1x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png');
+  _background: none;
+}
 .bi-pane {
-  min-height: 25px;
+  min-height: 55px;
   background-color: rgba(247, 248, 250, 0);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00f7f8fa,endColorstr=#00f7f8fa);
 }
+.bi-loading-widget div {
+  background-color: rgba(54, 133, 242, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e63685f2,endColorstr=#e63685f2);
+  -webkit-border-radius: 2.5px;
+  -moz-border-radius: 2.5px;
+  border-radius: 2.5px;
+  -webkit-animation: loading-widget 0.8s infinite linear;
+  -moz-animation: loading-widget 0.8s infinite linear;
+  -ms-animation: loading-widget 0.8s infinite linear;
+  -o-animation: loading-widget 0.8s infinite linear;
+  animation: loading-widget 0.8s infinite linear;
+}
+.bi-loading-widget .rect2 {
+  -webkit-animation-delay: -0.2s;
+  -moz-animation-delay: -0.2s;
+  -ms-animation-delay: -0.2s;
+  -o-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.bi-loading-widget .rect3 {
+  -webkit-animation-delay: -0.4s;
+  -moz-animation-delay: -0.4s;
+  -ms-animation-delay: -0.4s;
+  -o-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+@-webkit-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-moz-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-ms-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-o-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+.bi-loading-widget.hack {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.bi-loading-widget.hack div {
+  background-color: rgba(54, 133, 242, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003685f2,endColorstr=#003685f2);
+}
 .bi-segment-button {
   color: #3685f2;
 }

dist/fineui.js

@@ -12049,10 +12049,11 @@ _.extend(BI.OB.prototype, {
          * @param force 是否强制挂载子节点
          * @param deep 子节点是否也是按照当前force处理
          * @param lifeHook 生命周期钩子触不触发，默认触发
+         * @param predicate 递归每个widget的回调
          * @returns {boolean}
          * @private
          */
-        _mount: function (force, deep, lifeHook) {
+        _mount: function (force, deep, lifeHook, predicate) {
             var self = this;
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
@@ -12063,9 +12064,10 @@ _.extend(BI.OB.prototype, {
             BI.each(this._children, function (i, widget) {
                 !self.isEnabled() && widget._setEnable(false);
                 !self.isValid() && widget._setValid(false);
-                widget._mount && widget._mount(deep ? force : false, deep, lifeHook);
+                widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
             lifeHook !== false && this.mounted && this.mounted();
+            predicate && predicate(this);
             return true;
         },
 
@@ -12362,11 +12364,11 @@ _.extend(BI.OB.prototype, {
         }
     });
 
-    BI.mount = function (widget, container) {
+    BI.mount = function (widget, container, predicate) {
         if (container) {
             BI.Widget._renderEngine.createElement(container).append(widget.element);
         }
-        return widget._mount(true, false, false);
+        return widget._mount(true, false, false, predicate);
     };
 })();(function () {
     var kv = {};
@@ -35787,30 +35789,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: {
+                        el: loadingAnimation
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } 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);
             BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._loading,

dist/fineui_without_jquery_polyfill.js

@@ -11807,10 +11807,11 @@ _.extend(BI.OB.prototype, {
          * @param force 是否强制挂载子节点
          * @param deep 子节点是否也是按照当前force处理
          * @param lifeHook 生命周期钩子触不触发，默认触发
+         * @param predicate 递归每个widget的回调
          * @returns {boolean}
          * @private
          */
-        _mount: function (force, deep, lifeHook) {
+        _mount: function (force, deep, lifeHook, predicate) {
             var self = this;
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
@@ -11821,9 +11822,10 @@ _.extend(BI.OB.prototype, {
             BI.each(this._children, function (i, widget) {
                 !self.isEnabled() && widget._setEnable(false);
                 !self.isValid() && widget._setValid(false);
-                widget._mount && widget._mount(deep ? force : false, deep, lifeHook);
+                widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
             lifeHook !== false && this.mounted && this.mounted();
+            predicate && predicate(this);
             return true;
         },
 
@@ -12120,11 +12122,11 @@ _.extend(BI.OB.prototype, {
         }
     });
 
-    BI.mount = function (widget, container) {
+    BI.mount = function (widget, container, predicate) {
         if (container) {
             BI.Widget._renderEngine.createElement(container).append(widget.element);
         }
-        return widget._mount(true, false, false);
+        return widget._mount(true, false, false, predicate);
     };
 })();(function () {
     var kv = {};
@@ -24377,30 +24379,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: {
+                        el: loadingAnimation
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } 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);
             BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._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: {
+                        el: loadingAnimation
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
                     }],
                     element: BI.Layers.make(this.getName(), this)
                 });
             }
             BI.Layers.show(self.getName());
         } 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);
             BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                 element: this,
                 items: [{
                     el: this._loading,

src/core/widget.js

@@ -176,10 +176,11 @@
          * @param force 是否强制挂载子节点
          * @param deep 子节点是否也是按照当前force处理
          * @param lifeHook 生命周期钩子触不触发，默认触发
+         * @param predicate 递归每个widget的回调
          * @returns {boolean}
          * @private
          */
-        _mount: function (force, deep, lifeHook) {
+        _mount: function (force, deep, lifeHook, predicate) {
             var self = this;
             if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) {
                 return false;
@@ -190,9 +191,10 @@
             BI.each(this._children, function (i, widget) {
                 !self.isEnabled() && widget._setEnable(false);
                 !self.isValid() && widget._setValid(false);
-                widget._mount && widget._mount(deep ? force : false, deep, lifeHook);
+                widget._mount && widget._mount(deep ? force : false, deep, lifeHook, predicate);
             });
             lifeHook !== false && this.mounted && this.mounted();
+            predicate && predicate(this);
             return true;
         },
 
@@ -489,10 +491,10 @@
         }
     });
 
-    BI.mount = function (widget, container) {
+    BI.mount = function (widget, container, predicate) {
         if (container) {
             BI.Widget._renderEngine.createElement(container).append(widget.element);
         }
-        return widget._mount(true, false, false);
+        return widget._mount(true, false, false, predicate);
     };
 })();

src/css/base/pane.css

@@ -1,5 +1,470 @@
+.farbtastic .wheel {
+  background: url('images/1x/background/wheel.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png');
+  _background: none;
+}
+.farbtastic .overlay {
+  background: url('images/1x/background/mask.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png');
+  _background: none;
+}
+.farbtastic .marker {
+  background: url('images/1x/background/marker.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.center_open {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.roots_open {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-display-tree .ztree li span.button.switch.bottom_open {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li ul.line {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li ul.line {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 1px 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_full_focus {
+  background: url('images/2x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_false_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_full_focus {
+  background: url('images/2x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_active.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree li span.button.chk.checkbox_true_part_focus {
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
+  background-size: contain;
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_full_focus {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_false_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_full_focus {
+  background: url('images/1x/icon/check_box_active.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_active.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree.hack li span.button.chk.checkbox_true_part_focus {
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
+  _background: none;
+}
+.ztree li span.button.root_open {
+  background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_open {
+  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
+  _background: none;
+}
+.ztree li span.button.root_close {
+  background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.root_close {
+  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
+  _background: none;
+}
+.ztree li span.button.roots_open {
+  background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_open {
+  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
+  _background: none;
+}
+.ztree li span.button.roots_close {
+  background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_close {
+  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
+  _background: none;
+}
+.ztree li span.button.center_open {
+  background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_open {
+  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
+  _background: none;
+}
+.ztree li span.button.center_close {
+  background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_close {
+  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_open {
+  background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_open {
+  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
+  _background: none;
+}
+.ztree li span.button.bottom_close {
+  background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_close {
+  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
+  _background: none;
+}
+.ztree li span.button.roots_docu {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.roots_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.ztree li span.button.center_docu {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.center_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .ztree li span.button.bottom_docu {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.ztree li span.button.ico_loading {
+  background: url('images/1x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/loading.gif');
+  _background: none;
+}
+.base-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_1.png');
+  _background: none;
+}
+.bi-theme-dark .base-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_1.png') repeat-y 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_1.png');
+  _background: none;
+}
+.first-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
+  _background: none;
+}
+.bi-theme-dark .first-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
+  _background: none;
+}
+.mid-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
+  _background: none;
+}
+.bi-theme-dark .mid-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
+  _background: none;
+}
+.last-line-conn-background {
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
+  _background: none;
+}
+.bi-theme-dark .last-line-conn-background {
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
+  _background: none;
+}
+.loading-background {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background {
+  background: url('images/2x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-background {
+  background: url('images/2x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-normal-disabled-background {
+  background: url('images/2x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/auto_color_normal_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-background {
+  background: url('images/2x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.trans-color-disabled-background {
+  background: url('images/2x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/background/trans_disable.png');
+  background-size: contain;
+  _background: none;
+}
+.auto-color-background.hack {
+  background: url('images/1x/background/auto_color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color.png');
+  _background: none;
+}
+.auto-color-normal-background.hack {
+  background: url('images/1x/background/auto_color_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal.png');
+  _background: none;
+}
+.auto-color-normal-disabled-background.hack {
+  background: url('images/1x/background/auto_color_normal_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/auto_color_normal_disable.png');
+  _background: none;
+}
+.trans-color-background.hack {
+  background: url('images/1x/background/trans_normal.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_normal.png');
+  _background: none;
+}
+.trans-color-disabled-background.hack {
+  background: url('images/1x/background/trans_disable.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png');
+  _background: none;
+}
 .bi-pane {
-  min-height: 25px;
+  min-height: 55px;
   background-color: rgba(247, 248, 250, 0);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00f7f8fa,endColorstr=#00f7f8fa);
 }
+.bi-loading-widget div {
+  background-color: rgba(54, 133, 242, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e63685f2,endColorstr=#e63685f2);
+  -webkit-border-radius: 2.5px;
+  -moz-border-radius: 2.5px;
+  border-radius: 2.5px;
+  -webkit-animation: loading-widget 0.8s infinite linear;
+  -moz-animation: loading-widget 0.8s infinite linear;
+  -ms-animation: loading-widget 0.8s infinite linear;
+  -o-animation: loading-widget 0.8s infinite linear;
+  animation: loading-widget 0.8s infinite linear;
+}
+.bi-loading-widget .rect2 {
+  -webkit-animation-delay: -0.2s;
+  -moz-animation-delay: -0.2s;
+  -ms-animation-delay: -0.2s;
+  -o-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.bi-loading-widget .rect3 {
+  -webkit-animation-delay: -0.4s;
+  -moz-animation-delay: -0.4s;
+  -ms-animation-delay: -0.4s;
+  -o-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+@-webkit-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-moz-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-ms-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@-o-keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+@keyframes loading-widget {
+  0%,
+  100% {
+    -webkit-transform: scaleY(0.3);
+    -moz-transform: scaleY(0.3);
+    -o-transform: scaleY(0.3);
+    -ms-transform: scaleY(0.3);
+    transform: scaleY(0.3);
+  }
+  50% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+}
+.bi-loading-widget.hack {
+  background: url('images/2x/icon/loading.gif') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/loading.gif');
+  background-size: contain;
+  _background: none;
+}
+.bi-loading-widget.hack div {
+  background-color: rgba(54, 133, 242, 0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003685f2,endColorstr=#003685f2);
+}

src/less/base/pane.less

@@ -1,6 +1,34 @@
 @import "../index";
-
+@import "../resource/background";
 .bi-pane {
-  min-height: 25px;
+    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;
+}