@cw-devops/bk-magic-vue/lib/ui/loading.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color:rgba(255, 255, 255, 0.9);
    z-index:100;
}

.bk-loading .bk-loading-wrapper{
        text-align:center;
        line-height:1;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
    }

.bk-loading-title{
        text-align:center;
        font-size:14px;
        color:#63656e;
        line-height:normal;
        line-height:initial;
        margin-top:5px;
    }

.bk-loading .bk-loading1{
        position:relative;
        width:75px;
        height:14px;
        margin:auto;
        display:inline-block;
    }

.bk-loading .bk-loading1 .point{
            position:absolute;
            top:0;
            width:14px;
            height:14px;
            -webkit-animation-name:scale-animate;
                    animation-name:scale-animate;
            -webkit-animation-duration:.8s;
                    animation-duration:.8s;
            -webkit-animation-iteration-count:infinite;
                    animation-iteration-count:infinite;
            -webkit-animation-direction:normal;
                    animation-direction:normal;
            -webkit-transform:scale(.6);
                    transform:scale(.6);
            border-radius:19px;
        }

.bk-loading .bk-loading1 .point1{
            background-color:#fd6154;
            left:0;
            -webkit-animation-delay:0.1s;
                    animation-delay:0.1s;
        }

.bk-loading .bk-loading1 .point2{
            background-color:#ffb726;
            left:20px;
            -webkit-animation-delay:0.25s;
                    animation-delay:0.25s;
        }

.bk-loading .bk-loading1 .point3{
            background-color:#4cd084;
            left:40px;
            -webkit-animation-delay:0.4s;
                    animation-delay:0.4s;
        }

.bk-loading .bk-loading1 .point4{
            background-color:#57a3f1;
            left:60px;
            -webkit-animation-delay:0.55s;
                    animation-delay:0.55s;
        }

.bk-loading .bk-loading1.bk-black .point1,
            .bk-loading .bk-loading1.bk-black .point2,
            .bk-loading .bk-loading1.bk-black .point3,
            .bk-loading .bk-loading1.bk-black .point4{
                background:#979ba5;
            }

.bk-dot-loading,
.bk-loading1{
    position:relative;
    width:75px;
    height:14px;
    margin:auto;
    display:inline-block;
}

.bk-dot-loading .point, .bk-loading1 .point{
        position:absolute;
        top:0;
        width:14px;
        height:14px;
        -webkit-animation-name:scale-animate;
                animation-name:scale-animate;
        -webkit-animation-duration:.8s;
                animation-duration:.8s;
        -webkit-animation-iteration-count:infinite;
                animation-iteration-count:infinite;
        -webkit-animation-direction:normal;
                animation-direction:normal;
        -webkit-transform:scale(.6);
                transform:scale(.6);
        border-radius:19px;
    }

.bk-dot-loading .point1, .bk-loading1 .point1{
        background-color:#fd6154;
        left:0;
        -webkit-animation-delay:0.1s;
                animation-delay:0.1s;
    }

.bk-dot-loading .point2, .bk-loading1 .point2{
        background-color:#ffb726;
        left:20px;
        -webkit-animation-delay:0.25s;
                animation-delay:0.25s;
    }

.bk-dot-loading .point3, .bk-loading1 .point3{
        background-color:#4cd084;
        left:40px;
        -webkit-animation-delay:0.4s;
                animation-delay:0.4s;
    }

.bk-dot-loading .point4, .bk-loading1 .point4{
        background-color:#57a3f1;
        left:60px;
        -webkit-animation-delay:0.55s;
                animation-delay:0.55s;
    }

.bk-dot-loading.bk-size-mini, .bk-loading1.bk-size-mini{
        width:30px;
    }

.bk-dot-loading.bk-size-mini .point, .bk-loading1.bk-size-mini .point{
            width:6px;
            height:6px;
        }

.bk-dot-loading.bk-size-mini .point1, .bk-loading1.bk-size-mini .point1{
            left:0;
        }

.bk-dot-loading.bk-size-mini .point2, .bk-loading1.bk-size-mini .point2{
            left:10px;
        }

.bk-dot-loading.bk-size-mini .point3, .bk-loading1.bk-size-mini .point3{
            left:20px;
        }

.bk-dot-loading.bk-size-mini .point4, .bk-loading1.bk-size-mini .point4{
            left:30px;
        }

.bk-dot-loading.bk-size-small, .bk-loading1.bk-size-small{
        width:45px;
    }

.bk-dot-loading.bk-size-small .point, .bk-loading1.bk-size-small .point{
            width:10px;
            height:10px;
        }

.bk-dot-loading.bk-size-small .point1, .bk-loading1.bk-size-small .point1{
            left:0;
        }

.bk-dot-loading.bk-size-small .point2, .bk-loading1.bk-size-small .point2{
            left:15px;
        }

.bk-dot-loading.bk-size-small .point3, .bk-loading1.bk-size-small .point3{
            left:30px;
        }

.bk-dot-loading.bk-size-small .point4, .bk-loading1.bk-size-small .point4{
            left:45px;
        }

.bk-dot-loading.bk-black .point1,
        .bk-dot-loading.bk-black .point2,
        .bk-dot-loading.bk-black .point3,
        .bk-dot-loading.bk-black .point4,
        .bk-loading1.bk-black .point1,
        .bk-loading1.bk-black .point2,
        .bk-loading1.bk-black .point3,
        .bk-loading1.bk-black .point4{
            background:#979ba5;
        }

.bk-dot-loading.bk-primary .point1,
        .bk-dot-loading.bk-primary .point2,
        .bk-dot-loading.bk-primary .point3,
        .bk-dot-loading.bk-primary .point4,
        .bk-loading1.bk-primary .point1,
        .bk-loading1.bk-primary .point2,
        .bk-loading1.bk-primary .point3,
        .bk-loading1.bk-primary .point4{
            background:#3c96ff;
        }

.bk-dot-loading.bk-danger .point1,
        .bk-dot-loading.bk-danger .point2,
        .bk-dot-loading.bk-danger .point3,
        .bk-dot-loading.bk-danger .point4,
        .bk-loading1.bk-danger .point1,
        .bk-loading1.bk-danger .point2,
        .bk-loading1.bk-danger .point3,
        .bk-loading1.bk-danger .point4{
            background:#ff5656;
        }

.bk-dot-loading.bk-warning .point1,
        .bk-dot-loading.bk-warning .point2,
        .bk-dot-loading.bk-warning .point3,
        .bk-dot-loading.bk-warning .point4,
        .bk-loading1.bk-warning .point1,
        .bk-loading1.bk-warning .point2,
        .bk-loading1.bk-warning .point3,
        .bk-loading1.bk-warning .point4{
            background:#ffb848;
        }

.bk-dot-loading.bk-default .point1,
        .bk-dot-loading.bk-default .point2,
        .bk-dot-loading.bk-default .point3,
        .bk-dot-loading.bk-default .point4,
        .bk-loading1.bk-default .point1,
        .bk-loading1.bk-default .point2,
        .bk-loading1.bk-default .point3,
        .bk-loading1.bk-default .point4{
            background:#979BA5;
        }

.bk-spin-loading,
.bk-loading2{
    width:39px;
    height:39px;
    position:relative;
    margin:auto;
    display:inline-block;
    vertical-align:middle;
}

.bk-spin-loading .rotate,
.bk-loading2 .rotate{
    position:absolute;
    top:77%;
    right:43%;
    background-color:none;
    background-color:#39424e\9\0;
    width:6px;
    height:8px;
    -webkit-transform-origin:50% -10px;
            transform-origin:50% -10px;
    border-radius:8px;
    -webkit-transform:scale(0.4);
            transform:scale(0.4);
    -webkit-animation-name:fade;
            animation-name:fade;
    -webkit-animation-duration:1.2s;
            animation-duration:1.2s;
    -webkit-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
            animation-direction:normal;
}

.bk-spin-loading.bk-spin-loading-success .rotate,
.bk-loading2.bk-spin-loading-success .rotate{
    background:#30d878\9\0;
    -webkit-animation-name:fadeSuccess;
            animation-name:fadeSuccess;
}

.bk-spin-loading.bk-spin-loading-danger .rotate,
.bk-loading2.bk-spin-loading-danger .rotate{
    background:#ff5656\9\0;
    -webkit-animation-name:fadeDanger;
            animation-name:fadeDanger;
}

.bk-spin-loading.bk-spin-loading-warning .rotate,
.bk-loading2.bk-spin-loading-warning .rotate{
    background:#ffb400\9\0;
    -webkit-animation-name:fadeWarning;
            animation-name:fadeWarning;
}

.bk-spin-loading.bk-spin-loading-primary .rotate,
.bk-loading2.bk-spin-loading-primary .rotate{
    background:#3c96ff\9\0;
    -webkit-animation-name:fadePrimary;
            animation-name:fadePrimary;
}

.bk-spin-loading.bk-spin-loading-white .rotate,
.bk-loading2.bk-spin-loading-white .rotate{
    background:#fff\9\0;
    -webkit-animation-name:fadeWhite;
            animation-name:fadeWhite;
}

.bk-spin-loading .rotate1,
.bk-loading2 .rotate1{
    -webkit-animation-delay:0.45s;
            animation-delay:0.45s;
    -webkit-transform:rotate(-90deg);
            transform:rotate(-90deg);
}

.bk-spin-loading .rotate2,
.bk-loading2 .rotate2{
    -webkit-animation-delay:0.6s;
            animation-delay:0.6s;
    -webkit-transform:rotate(-45deg);
            transform:rotate(-45deg);
}

.bk-spin-loading .rotate3,
.bk-loading2 .rotate3{
    -webkit-animation-delay:0.75s;
            animation-delay:0.75s;
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
}

.bk-spin-loading .rotate4,
.bk-loading2 .rotate4{
    -webkit-animation-delay:0.9s;
            animation-delay:0.9s;
    -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
}

.bk-spin-loading .rotate5,
.bk-loading2 .rotate5{
    -webkit-animation-delay:1.05s;
            animation-delay:1.05s;
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
}

.bk-spin-loading .rotate6,
.bk-loading2 .rotate6{
    -webkit-animation-delay:1.2s;
            animation-delay:1.2s;
    -webkit-transform:rotate(135deg);
            transform:rotate(135deg);
}

.bk-spin-loading .rotate7,
.bk-loading2 .rotate7{
    -webkit-animation-delay:1.35s;
            animation-delay:1.35s;
    -webkit-transform:rotate(180deg);
            transform:rotate(180deg);
}

.bk-spin-loading .rotate8,
.bk-loading2 .rotate8{
    -webkit-animation-delay:1.5s;
            animation-delay:1.5s;
    -webkit-transform:rotate(-135deg);
            transform:rotate(-135deg);
}

.bk-spin-loading.bk-spin-loading-large,
.bk-loading2.bk-spin-loading-large{
    width:69px;
    height:69px;
}

.bk-spin-loading.bk-spin-loading-large .rotate,
.bk-loading2.bk-spin-loading-large .rotate{
    width:10px;
    height:14px;
    -webkit-transform-origin:50% -18px;
            transform-origin:50% -18px;
}

.bk-spin-loading.bk-spin-loading-small,
.bk-loading2.bk-spin-loading-small{
    width:27px;
    height:27px;
}

.bk-spin-loading.bk-spin-loading-small .rotate,
.bk-loading2.bk-spin-loading-small .rotate{
    width:4px;
    height:5px;
    -webkit-transform-origin:50% -7px;
            transform-origin:50% -7px;
}

.bk-spin-loading.bk-spin-loading-mini,
.bk-loading2.bk-spin-loading-mini{
    width:16px;
    height:16px;
}

.bk-spin-loading.bk-spin-loading-mini .rotate,
.bk-loading2.bk-spin-loading-mini .rotate{
    width:2px;
    height:3px;
    -webkit-transform-origin:50% -4px;
            transform-origin:50% -4px;
}

@keyframes scale-animate{
    0%{
        -webkit-transform:scale(1);
                transform:scale(1);
    }

    100%{
        -webkit-transform:scale(.6);
                transform:scale(.6);
    }
}

@-webkit-keyframes scale-animate{
    0%{
        -webkit-transform:scale(1);
    }

    100%{
        -webkit-transform:scale(.6);
    }
}

.bk-spin-loading,
.bk-loading2{
    width:39px;
    height:39px;
    position:relative;
    margin:auto;
    display:inline-block;
    vertical-align:middle;
}

.bk-spin-loading .rotate, .bk-loading2 .rotate{
        position:absolute;
        top:77%;
        right:43%;
        background-color:none;
        background-color:#39424e\9\0;
        width:6px;
        height:8px;
        -webkit-transform-origin:50% -10px;
                transform-origin:50% -10px;
        border-radius:8px;
        -webkit-transform:scale(0.4);
                transform:scale(0.4);
        -webkit-animation-name:fade;
                animation-name:fade;
        -webkit-animation-duration:1.2s;
                animation-duration:1.2s;
        -webkit-animation-iteration-count:infinite;
                animation-iteration-count:infinite;
        -webkit-animation-direction:normal;
                animation-direction:normal;
    }

.bk-spin-loading.bk-spin-loading-success .rotate, .bk-loading2.bk-spin-loading-success .rotate{
            background:#30d878\9\0;
            -webkit-animation-name:fadeSuccess;
                    animation-name:fadeSuccess;
        }

.bk-spin-loading.bk-spin-loading-danger .rotate, .bk-loading2.bk-spin-loading-danger .rotate{
            background:#ff5656\9\0;
            -webkit-animation-name:fadeDanger;
                    animation-name:fadeDanger;
        }

.bk-spin-loading.bk-spin-loading-warning .rotate, .bk-loading2.bk-spin-loading-warning .rotate{
            background:#ffb400\9\0;
            -webkit-animation-name:fadeWarning;
                    animation-name:fadeWarning;
        }

.bk-spin-loading.bk-spin-loading-primary .rotate, .bk-loading2.bk-spin-loading-primary .rotate{
            background:#3c96ff\9\0;
            -webkit-animation-name:fadePrimary;
                    animation-name:fadePrimary;
        }

.bk-spin-loading.bk-spin-loading-white .rotate, .bk-loading2.bk-spin-loading-white .rotate{
            background:#fff\9\0;
            -webkit-animation-name:fadeWhite;
                    animation-name:fadeWhite;
        }

.bk-spin-loading .rotate1, .bk-loading2 .rotate1{
        -webkit-animation-delay:0.45s;
                animation-delay:0.45s;
        -webkit-transform:rotate(-90deg);
                transform:rotate(-90deg);
    }

.bk-spin-loading .rotate2, .bk-loading2 .rotate2{
        -webkit-animation-delay:0.6s;
                animation-delay:0.6s;
        -webkit-transform:rotate(-45deg);
                transform:rotate(-45deg);
    }

.bk-spin-loading .rotate3, .bk-loading2 .rotate3{
        -webkit-animation-delay:0.75s;
                animation-delay:0.75s;
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }

.bk-spin-loading .rotate4, .bk-loading2 .rotate4{
        -webkit-animation-delay:0.9s;
                animation-delay:0.9s;
        -webkit-transform:rotate(45deg);
                transform:rotate(45deg);
    }

.bk-spin-loading .rotate5, .bk-loading2 .rotate5{
        -webkit-animation-delay:1.05s;
                animation-delay:1.05s;
        -webkit-transform:rotate(90deg);
                transform:rotate(90deg);
    }

.bk-spin-loading .rotate6, .bk-loading2 .rotate6{
        -webkit-animation-delay:1.2s;
                animation-delay:1.2s;
        -webkit-transform:rotate(135deg);
                transform:rotate(135deg);
    }

.bk-spin-loading .rotate7, .bk-loading2 .rotate7{
        -webkit-animation-delay:1.35s;
                animation-delay:1.35s;
        -webkit-transform:rotate(180deg);
                transform:rotate(180deg);
    }

.bk-spin-loading .rotate8, .bk-loading2 .rotate8{
        -webkit-animation-delay:1.5s;
                animation-delay:1.5s;
        -webkit-transform:rotate(-135deg);
                transform:rotate(-135deg);
    }

.bk-spin-loading.bk-spin-loading-large, .bk-loading2.bk-spin-loading-large{
        width:69px;
        height:69px;
    }

.bk-spin-loading.bk-spin-loading-large .rotate, .bk-loading2.bk-spin-loading-large .rotate{
            width:10px;
            height:14px;
            -webkit-transform-origin:50% -18px;
                    transform-origin:50% -18px;
        }

.bk-spin-loading.bk-spin-loading-small, .bk-loading2.bk-spin-loading-small{
        width:27px;
        height:27px;
    }

.bk-spin-loading.bk-spin-loading-small .rotate, .bk-loading2.bk-spin-loading-small .rotate{
            width:4px;
            height:5px;
            -webkit-transform-origin:50% -7px;
                    transform-origin:50% -7px;
        }

.bk-spin-loading.bk-spin-loading-mini, .bk-loading2.bk-spin-loading-mini{
        width:16px;
        height:16px;
    }

.bk-spin-loading.bk-spin-loading-mini .rotate, .bk-loading2.bk-spin-loading-mini .rotate{
            width:2px;
            height:3px;
            -webkit-transform-origin:50% -4px;
                    transform-origin:50% -4px;
        }

@keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeSuccess{
    0%{
        background-color:#2dcb56;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadeSuccess{
    0%{
        background-color:#2dcb56;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeWarning{
    0%{
        background-color:#ffb848;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadeWarning{
    0%{
        background-color:#ffb848;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeWhite{
    0%{
        background-color:rgb(255, 255, 255);
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadeWhite{
    0%{
        background-color:rgb(255, 255, 255);
    }

    100%{
        background-color:none;
    }
}

.bk-loading-box,
.bk-loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color:rgba(255, 255, 255, 0.9);
    z-index:100;
}

.bk-loading-box .bk-loading-wrapper, .bk-loading .bk-loading-wrapper{
        text-align:center;
        line-height:1;
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%, -50%);
                transform:translate(-50%, -50%);
    }

.bk-loading-box-title, .bk-loading-title{
        text-align:center;
        font-size:14px;
        color:#63656e;
        line-height:normal;
        line-height:initial;
        margin-top:5px;
    }

@keyframes fade{
    0%{
        background-color:#39424e;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeSuccess{
    0%{
        background-color:#30d878;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadePrimary{
    0%{
        background-color:#3c96ff;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeDanger{
    0%{
        background-color:#ff5656;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeWarning{
    0%{
        background-color:#ffb400;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeWhite{
    0%{
        background-color:white;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes animate{
    0%{
        -webkit-transform:scale(.5);
                transform:scale(.5)
    }

    100%{
        -webkit-transform:scale(.3);
                transform:scale(.3)
    }
}

@keyframes animate{
    0%{
        -webkit-transform:scale(.5);
                transform:scale(.5)
    }

    100%{
        -webkit-transform:scale(.3);
                transform:scale(.3)
    }
}

.bk-default-loading{
    display:inline-block;
}

.bk-default-loading .bk-loading-wrapper{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        position:absolute;
        width:100%;
        height:100%;
        left:unset;
        top:0;
        transform:unset;
        -webkit-transform:unset;
        background:inherit;
        padding:0 25%
    }

.bk-default-loading .bk-loading-wrapper :nth-child(1){
            margin:unset;
          }