bkui-vue 0.0.1-beta.4 → 0.0.1-beta.40

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,81 @@ export declare const loadingTypes: {
     indicator: {
         type: FunctionConstructor;
     };
+    loading: import("vue-types").VueTypeValidableDef<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;
+    };
+    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;
+    };
+    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.js

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

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,24 +53,61 @@
   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;
 
-    .bk-loading-indicator {
+    &.is-block {
+      display: block;
+    }
+
+    .@{bk-prefix}-loading-indicator {
       position: absolute;
       top: 50%;
       left: 50%;
       z-index: 4;
+      text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
-  .bk-loading-mask {
+  .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%;
     opacity: .5;
 
     &::after {
@@ -77,21 +119,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 +148,10 @@
         .create-rotate(.45s + (@value * .15), -135deg + (45 * (@value - 1)));
       }
     });
-    
-    each(@themeSelectors, {
-      &.bk-loading-@{key} {
-        .loading-theme(@value);
-      }
-    })
-    
-  ;
 
-    .bk-spin-indicator {
+    .@{bk-prefix}-spin-indicator {
+      display: inline-block;
+      width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }
 
@@ -121,9 +162,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 +181,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;
-    }}
+  }
 }

package/lib/loading/loading.variable.css

@@ -1,10 +1,12 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
   --danger-color: #ea3636;
   --default-color: #63656e;
+  --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
   --disable-color: #dcdee5;
@@ -58,6 +60,36 @@
   --link-success-disabled-color: #94f5a4;
   --link-warning-disabled-color: #ffd695;
   --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -82,20 +114,54 @@
 }
 .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;
 }
+.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;
+  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: var(--default-color);
+  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 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   opacity: 0.5;
 }
 .bk-loading-wrapper .bk-loading-mask::after {
@@ -107,11 +173,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: var(--font-size-medium);
+  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: var(--success-color);
+}
+.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: var(--danger-color);
+}
+.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: var(--warning-color);
+}
+.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: var(--primary-color);
+}
+.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: var(--white-color);
+}
+.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: var(--light-gray);
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
   background-color: var(--danger-color);
@@ -128,7 +243,7 @@
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
   background-color: var(--primary-color);
   animation-delay: 0.55s;
-  margin-right: 0;
+  margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
   transform: rotate(-135deg);
@@ -162,59 +277,35 @@
   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: var(--success-color);
-}
-.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: var(--danger-color);
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.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: var(--warning-color);
+.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-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: var(--primary-color);
+.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-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: var(--white-color);
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
+  margin-right: 0;
 }
-.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: var(--light-gray);
+.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-spin-indicator {
-  height: 40px;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
+  font-size: var(--font-size-medium);
 }
 .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;
@@ -235,6 +326,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;
@@ -260,27 +352,3 @@
   color: var(--default-color);
   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: var(--default-color);
-  border-radius: 8px;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-name: fade;
-  transform-origin: center 20px;
-  animation-direction: normal;
-}