bkui-vue 0.0.1-beta.7 → 0.0.1-beta.70

package/lib/loading/index.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,n,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e},e.exports.default=e.exports,e.exports.__esModule=!0}(a);var i,d,r,l=o(a.exports);e.BkLoadingMode=void 0,(i=e.BkLoadingMode||(e.BkLoadingMode={})).Spin="spin",i.Default="default",e.BkLoadingSize=void 0,(d=e.BkLoadingSize||(e.BkLoadingSize={})).Small="small",d.Large="large";var u={indicator:{type:Function},theme:t.PropTypes.theme(["white","primary","warning","success","danger"]),title:t.PropTypes.string.def(""),size:t.PropTypes.size(),mode:t.PropTypes.oneOf(Object.values(e.BkLoadingMode))},s=n.defineComponent({name:"BkLoading",props:u,setup:function(e,o){var a=[1,2,3,4].map((function(e){return n.createVNode("span",{class:"dot dot-".concat(e)},null)})),i=n.createVNode("div",{class:"bk-spin-indicator"},[[1,2,3,4,5,6,7,8].map((function(e){return n.createVNode("span",{class:"oval oval-".concat(e)},null)}))]),d=n.computed((function(){return t.classes({"bk-nested-loading":!!o.slots.default},"bk-loading-wrapper")})),u=n.computed((function(){var n;return t.classes((l(n={},"bk-loading-size-".concat(e.size),!e.size),l(n,"bk-loading-".concat(e.theme),!e.theme),n),"bk-loading-indicator")})),s=n.computed((function(){return!!e.title})),c=n.computed((function(){var t="spin"===e.mode;return"function"==typeof e.indicator?n.createVNode(e.indicator,null,null):"function"==typeof r?n.createVNode(r,null,null):t?i:a}));return function(){return n.createVNode("div",{class:d.value},[n.createVNode("div",{class:u.value},[c.value,s.value&&n.createVNode("div",{class:"bk-loading-title"},[e.title])]),o.slots.default&&n.createVNode("div",{class:"bk-loading-mask"},[o.slots.default()])])}}});s.install=function(e){e.component(s.name,s)},s.setDefaultIndicator=function(e){r="function"==typeof e?e:function(){return n.createVNode(e,null,null)}},s.BkLoadingMode=e.BkLoadingMode,s.BkLoadingSize=e.BkLoadingSize,e.default=s,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue")):o(e["../shared"],e.vue);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,o)=>(()=>{"use strict";var t={4212:o=>{o.exports=e},748:e=>{e.exports=o}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,r),a.exports}r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{r.r(a),r.d(a,{BkLoading:()=>s,BkLoadingMode:()=>t,BkLoadingSize:()=>n,default:()=>p,setDefaultIndicator:()=>d});var e=r(4212);function o(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}var t,n,i,l=r(748);function d(e){i="function"==typeof e?e:function(){return(0,l.createVNode)(e,null,null)}}!function(e){e.Default="default",e.Spin="spin"}(t||(t={})),function(e){e.Normal="",e.Mini="mini",e.Small="small",e.Large="large"}(n||(n={}));var u={indicator:{type:Function},loading:e.PropTypes.bool.def(!0),inline:e.PropTypes.bool.def(!0),theme:e.PropTypes.theme(["white","primary","warning","success","danger"]),title:e.PropTypes.string.def(""),size:e.PropTypes.commonType(Object.values(n)).def(n.Normal),mode:e.PropTypes.commonType(Object.values(t)).def("default")};const c=(0,l.defineComponent)({name:"Loading",props:u,setup:function(n,r){var a=[1,2,3,4].map((function(e){return(0,l.createVNode)("span",{class:"dot dot-".concat(e)},null)})),d=(0,l.createVNode)("div",{class:"bk-spin-indicator"},[[1,2,3,4,5,6,7,8].map((function(e){return(0,l.createVNode)("span",{class:"oval oval-".concat(e)},null)}))]),u=(0,l.computed)((function(){return(0,e.classes)({"bk-loading-wrapper":n.loading,"bk-nested-loading":!!r.slots.default})})),c=(0,l.computed)((function(){var t;return(0,e.classes)((o(t={},"bk-loading-size-".concat(n.size),!!n.size),o(t,"bk-loading-".concat(n.theme),!!n.theme),t),"bk-loading-indicator")})),s=(0,l.computed)((function(){return!!n.title})),p=(0,l.computed)((function(){var e=n.mode===t.Spin;return"function"==typeof n.indicator?(0,l.createVNode)(n.indicator,null,null):"function"==typeof i?(0,l.createVNode)(i,null,null):e?d:a}));return function(){var e,o;return(0,l.createVNode)("div",{class:u.value},[n.loading&&[(0,l.createVNode)("div",{class:c.value},[p.value,s.value&&(0,l.createVNode)("div",{class:"bk-loading-title"},[n.title])]),r.slots.default&&(0,l.createVNode)("div",{class:"bk-loading-mask"},null)],null===(o=(e=r.slots).default)||void 0===o?void 0:o.call(e)])}}});var s=(0,e.withInstallProps)(c,{setDefaultIndicator:d,BkLoadingMode:t,BkLoadingSize:n},!0);const p=s})(),a})()));

package/lib/loading/loading.css

@@ -19,23 +19,66 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
 .bk-loading-wrapper {
   position: static;
-  display: inline-block;
   font-size: 0;
+  vertical-align: middle;
+}
+.bk-loading-wrapper:not(.bk-nested-loading) {
+  display: inline-block;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
+  width: 100%;
+  height: 100%;
+}
+.bk-loading-wrapper.bk-nested-loading.is-block {
+  display: block;
 }
 .bk-loading-wrapper.bk-nested-loading .bk-loading-indicator {
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: 4;
+  z-index: 11;
+  text-align: center;
   transform: translate(-50%, -50%);
 }
+.bk-loading-wrapper .dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+  border-radius: 50%;
+  transform: scale(0.6);
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-name: loading-scale-animate;
+  animation-direction: normal;
+}
+.bk-loading-wrapper .oval {
+  position: absolute;
+  width: 6px;
+  height: 8px;
+  background-color: #63656e;
+  border-radius: 8px;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-name: fade;
+  transform-origin: center 20px;
+  animation-direction: normal;
+}
 .bk-loading-wrapper .bk-loading-mask {
-  opacity: 0.5;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 .bk-loading-wrapper .bk-loading-mask::after {
   position: absolute;
@@ -46,11 +89,60 @@
   z-index: 10;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.8);
   content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
-  font-size: 14px;
+  line-height: 1;
+  text-align: center;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
+  background-color: #2dcb56;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
+  background-color: #ea3636;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
+  background-color: #ff9c01;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
+  background-color: #3a84ff;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
+  background-color: white;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
+  background-color: #c4c6cc;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
   background-color: #ea3636;
@@ -67,7 +159,7 @@
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
   background-color: #3a84ff;
   animation-delay: 0.55s;
-  margin-right: 0;
+  margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
   transform: rotate(-135deg);
@@ -101,59 +193,36 @@
   transform: rotate(180deg);
   animation-delay: 1.65s;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
-  background-color: #2dcb56;
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
-  background-color: #ea3636;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
+  height: 16px;
+  width: 16px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
-  background-color: #ff9c01;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
+  width: 3px;
+  height: 3px;
+  margin-right: 3px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
-  background-color: #3a84ff;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
+  margin-right: 0;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
-  background-color: white;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
+  width: 2px;
+  height: 3px;
+  border-radius: 3px;
+  transform-origin: center 8px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
-  background-color: #c4c6cc;
-}
-.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  height: 40px;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
+  font-size: 14px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
   height: 22px;
+  width: 22px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
   width: 6px;
@@ -174,6 +243,7 @@
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
   height: 52px;
+  width: 52px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
   width: 20px;
@@ -199,27 +269,3 @@
   color: #63656e;
   text-align: center;
 }
-.bk-loading-wrapper .bk-loading-indicator .dot {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 10px;
-  border-radius: 50%;
-  transform: scale(0.6);
-  animation-duration: 0.8s;
-  animation-iteration-count: infinite;
-  animation-name: loading-scale-animate;
-  animation-direction: normal;
-}
-.bk-loading-wrapper .bk-loading-indicator .oval {
-  position: absolute;
-  width: 6px;
-  height: 8px;
-  background-color: #63656e;
-  border-radius: 8px;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-name: fade;
-  transform-origin: center 20px;
-  animation-direction: normal;
-}

package/lib/loading/loading.d.ts

@@ -1,9 +1,11 @@
 import { ExtractPropTypes } from 'vue';
 export declare enum BkLoadingMode {
-    Spin = "spin",
-    Default = "default"
+    Default = "default",
+    Spin = "spin"
 }
 export declare enum BkLoadingSize {
+    Normal = "",
+    Mini = "mini",
     Small = "small",
     Large = "large"
 }
@@ -12,42 +14,87 @@ export declare const loadingTypes: {
     indicator: {
         type: FunctionConstructor;
     };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    inline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     theme: import("vue-types").VueTypeDef<string>;
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string>;
-    mode: import("vue-types").VueTypeDef<BkLoadingMode>;
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
 };
 export declare type LoadingTypes = ExtractPropTypes<typeof loadingTypes>;
 declare const _default: import("vue").DefineComponent<{
     indicator: {
         type: FunctionConstructor;
     };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    inline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     theme: import("vue-types").VueTypeDef<string>;
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string>;
-    mode: import("vue-types").VueTypeDef<BkLoadingMode>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    indicator?: unknown;
-    theme?: unknown;
-    title?: unknown;
-    size?: unknown;
-    mode?: unknown;
-} & {
-    title: string;
-} & {
-    theme?: string;
-    size?: string;
-    indicator?: Function;
-    mode?: BkLoadingMode;
-}> & {}, {
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    indicator: {
+        type: FunctionConstructor;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    inline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    theme: import("vue-types").VueTypeDef<string>;
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}>>, {
     title: string;
+    inline: boolean;
+    size: string;
+    loading: boolean;
+    mode: string;
 }>;
 export default _default;

package/lib/loading/loading.less

@@ -8,6 +8,12 @@
 @ovalGap: 20px;
 @titleMarginTop: 8px;
 
+@miniDotSize: 3px;
+@miniDotGap: 3px;
+@miniOvalWidth: 2px;
+@miniOvalHeight: 3px;
+@miniOvalGap: 8px;
+
 @smallDotSize: 6px;
 @smallDotGap: 6px;
 @smallOvalWidth: 4px;
@@ -20,7 +26,6 @@
 @largeOvalHeight: 12px;
 @largeOvalGap: 26px;
 
-
 .create-rotate(@time, @deg) {
   transform: rotate(@deg);
   animation-delay: @time;
@@ -29,15 +34,15 @@
 .loading-theme(@theme) {
   .oval,
   .dot,
-  .dot1,
-  .dot2,
-  .dot3,
-  .dot4 {
+  .dot-1,
+  .dot-2,
+  .dot-3,
+  .dot-4 {
     background-color: @theme;
   }
 }
 
-@sizeSelectors: small, large;
+@sizeSelectors: mini, small, large;
 @selectors: @danger-color, @warning-color, @success-color, @primary-color;
 @themeSelectors: {
   success: @success-color;
@@ -48,25 +53,63 @@
   default: @light-gray;
 };
 
-.bk-loading-wrapper {
+.@{bk-prefix}-loading-wrapper {
   position: static;
-  display: inline-block;
   font-size: 0;
-    
-  &.bk-nested-loading {
+  vertical-align: middle;
+  &:not(.@{bk-prefix}-nested-loading) {
+    display: inline-block;
+  }
+
+  &.@{bk-prefix}-nested-loading {
     position: relative;
+    width: 100%;
+    height: 100%;
+
+    &.is-block {
+      display: block;
+    }
 
-    .bk-loading-indicator {
+    .@{bk-prefix}-loading-indicator {
       position: absolute;
       top: 50%;
       left: 50%;
-      z-index: 4;
+      z-index: 11;
+      text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
-  .bk-loading-mask {
-    opacity: .5;
+  .dot {
+    display: inline-block;
+    width: @dotSize;
+    height: @dotSize;
+    margin-right: @dotGap;
+    border-radius: 50%;
+    transform: scale(.6);
+    animation-duration: .8s;
+    animation-iteration-count: infinite;
+    animation-name: loading-scale-animate;
+    animation-direction: normal;
+  }
+
+  .oval {
+    position: absolute;
+    width: @ovalWidth;
+    height: @ovalHeight;
+    background-color: @default-color;
+    border-radius: @ovalHeight;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-name: fade;
+    transform-origin: center @ovalGap;
+    animation-direction: normal;
+  }
+
+  .@{bk-prefix}-loading-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
 
     &::after {
       position: absolute;
@@ -77,21 +120,26 @@
       z-index: 10;
       width: 100%;
       height: 100%;
-      background-color: rgba(255, 255, 255, .9);
+      background-color: rgba(255, 255, 255, .8);
       content: '';
     }
   }
 
-  .bk-loading-indicator {
-    font-size: @font-size-medium;
-
+  .@{bk-prefix}-loading-indicator {
+    line-height: 1;
+    text-align: center;
+    each(@themeSelectors, {
+      &.@{bk-prefix}-loading-@{key} {
+        .loading-theme(@value);
+      }
+    })
     
-    each(@selectors, {
+      each(@selectors, {
       .dot-@{index} {
         background-color: @value;
         animation-delay: .1s + (@index - 1) * .15;
         & when (@index = 4) {
-          margin-right: 0;
+          margin-right: 0px;
         }
       }
     });
@@ -101,16 +149,11 @@
         .create-rotate(.45s + (@value * .15), -135deg + (45 * (@value - 1)));
       }
     });
-    
-    each(@themeSelectors, {
-      &.bk-loading-@{key} {
-        .loading-theme(@value);
-      }
-    })
-    
-  ;
 
-    .bk-spin-indicator {
+    .@{bk-prefix}-spin-indicator {
+      position: relative;
+      display: inline-block;
+      width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }
 
@@ -121,9 +164,10 @@
     @sizedOvalHeight: '@{value}OvalHeight';
     @sizedOvalGap: '@{value}OvalGap';
   
-    &.bk-loading-size-@{value} {
-      .bk-spin-indicator  {
+    &.@{bk-prefix}-loading-size-@{value} {
+      .@{bk-prefix}-spin-indicator  {
         height: 2 * @@sizedOvalGap;
+        width: 2 * @@sizedOvalGap;
       }
       .dot {
         width: @@sizedDotSize;
@@ -139,43 +183,17 @@
         border-radius: @@sizedOvalHeight;
         transform-origin: center @@sizedOvalGap;
       }
-      .bk-loading-title {
+      .@{bk-prefix}-loading-title {
         font-size: if(@value = small, @font-size-base, @font-size-medium);
       }
     } 
   })
-
-    .bk-loading-title {
+    .@{bk-prefix}-loading-title {
       margin-top: @titleMarginTop;
       font-size: @font-size-medium;
       line-height: normal;
       color: @default-color;
       text-align: center;
     }
-    
-    .dot {
-      display: inline-block;
-      width: @dotSize;
-      height: @dotSize;
-      margin-right: @dotGap;
-      border-radius: 50%;
-      transform: scale(.6);
-      animation-duration: .8s;
-      animation-iteration-count: infinite;
-      animation-name: loading-scale-animate;
-      animation-direction: normal;
-    }
-
-    .oval {
-      position: absolute;
-      width: @ovalWidth;
-      height: @ovalHeight;
-      background-color: @default-color;
-      border-radius: @ovalHeight;
-      animation-duration: 1.2s;
-      animation-iteration-count: infinite;
-      animation-name: fade;
-      transform-origin: center @ovalGap;
-      animation-direction: normal;
-    }}
+  }
 }