Merge pull request #653 in VISUAL/fineui from ~GUY/fineui:master to master

* commit '9a331bd46cb5eac117c03842cb3ca097c6fdc14d': update
6 years ago · e2d1a05c6c
13 changed files with 2055 additions and 121 deletions
--- a/dist/base.css
+++ b/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;
 }
--- a/dist/base.js
+++ b/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: {
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
+                        el: loadingAnimation
                    }],
                    element: BI.Layers.make(this.getName(), this)
                });
            }
            BI.Layers.show(self.getName());
        } else if (BI.isNull(this._loading)) {
-            this._loading = BI.createWidget({
-                type: "bi.layout",
-                cls: "loading-background",
-                height: 30
-            });
+            this._loading = loadingAnimation;
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                element: this,
                items: [{
                    el: this._loading,
--- a/dist/bundle.css
+++ b/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;
 }
--- a/dist/bundle.js
+++ b/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;
        },

@ -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: {
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
+                        el: loadingAnimation
                    }],
                    element: BI.Layers.make(this.getName(), this)
                });
            }
            BI.Layers.show(self.getName());
        } else if (BI.isNull(this._loading)) {
-            this._loading = BI.createWidget({
-                type: "bi.layout",
-                cls: "loading-background",
-                height: 30
-            });
+            this._loading = loadingAnimation;
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                element: this,
                items: [{
                    el: this._loading,
--- a/dist/bundle.min.js
+++ b/dist/bundle.min.js
--- a/dist/core.js
+++ b/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;
        },

--- a/dist/fineui.css
+++ b/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;
 }
--- a/dist/fineui.js
+++ b/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;
        },

@ -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: {
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
+                        el: loadingAnimation
                    }],
                    element: BI.Layers.make(this.getName(), this)
                });
            }
            BI.Layers.show(self.getName());
        } else if (BI.isNull(this._loading)) {
-            this._loading = BI.createWidget({
-                type: "bi.layout",
-                cls: "loading-background",
-                height: 30
-            });
+            this._loading = loadingAnimation;
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                element: this,
                items: [{
                    el: this._loading,
--- a/dist/fineui.min.js
+++ b/dist/fineui.min.js
--- a/dist/fineui_without_jquery_polyfill.js
+++ b/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;
        },

@ -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: {
-                            type: "bi.layout",
-                            cls: "loading-background"
-                        },
-                        height: 30
+                        el: loadingAnimation
                    }],
                    element: BI.Layers.make(this.getName(), this)
                });
            }
            BI.Layers.show(self.getName());
        } else if (BI.isNull(this._loading)) {
-            this._loading = BI.createWidget({
-                type: "bi.layout",
-                cls: "loading-background",
-                height: 30
-            });
+            this._loading = loadingAnimation;
            this._loading.element.css("zIndex", 1);
            BI.createWidget({
-                type: "bi.absolute",
+                type: "bi.absolute_center_adapt",
                element: this,
                items: [{
                    el: this._loading,
--- a/dist/utils.min.js
+++ b/dist/utils.min.js
--- a/src/core/widget.js
+++ b/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;
        },

--- a/src/css/base/pane.css
+++ b/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);
+}