bk-magic-vue/lib/ui/process.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-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;
        }

@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:48px;
    height:48px;
    position:relative;
    margin:auto;
    display:inline-block;
    vertical-align:middle;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
}

.bk-spin-loading .rotate, .bk-loading2 .rotate{
        position:absolute;
        width:6px;
        height:8px;
        -webkit-transform-origin:50% 24px;
                transform-origin:50% 24px;
        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{
            -webkit-animation-name:fadeSuccess;
                    animation-name:fadeSuccess;
        }

.bk-spin-loading.bk-spin-loading-danger .rotate, .bk-loading2.bk-spin-loading-danger .rotate{
            -webkit-animation-name:fadeDanger;
                    animation-name:fadeDanger;
        }

.bk-spin-loading.bk-spin-loading-warning .rotate, .bk-loading2.bk-spin-loading-warning .rotate{
            -webkit-animation-name:fadeWarning;
                    animation-name:fadeWarning;
        }

.bk-spin-loading.bk-spin-loading-primary .rotate, .bk-loading2.bk-spin-loading-primary .rotate{
            -webkit-animation-name:fadePrimary;
                    animation-name:fadePrimary;
        }

.bk-spin-loading.bk-spin-loading-white .rotate, .bk-loading2.bk-spin-loading-white .rotate{
            -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:68px;
        height:68px;
    }

.bk-spin-loading.bk-spin-loading-large .rotate, .bk-loading2.bk-spin-loading-large .rotate{
            width:10px;
            height:12px;
            border-radius:12px;
            -webkit-transform-origin:50% 34px;
                    transform-origin:50% 34px;
        }

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

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

.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;
            border-radius:3px;
            -webkit-transform-origin:50% 8px;
                    transform-origin:50% 8px;
        }

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

.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:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

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

    100%{
        background-color:transparent;
    }
}

@-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;
          }

.bk-process{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position:relative;
}

.bk-process .bk-icon{
        font-size:22px;
    }

.bk-process .bk-spin-loading.bk-spin-loading-mini{
            width:22px;
            height:22px;
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            top:2px;
            left:3px;
        }

.bk-process .bk-process-toggle{
        position:relative;
        left:15px;
        width:24px;
        height:24px;
        line-height:24px;
        border-radius:50%;
        text-align:center;
        border:1px solid #c3cdd7;
        font-size:12px;
        color:#63656e;
        text-decoration:none
    }

.bk-process .bk-process-toggle.active,
        .bk-process .bk-process-toggle:hover{
            color:#fff;
            background:#3a84ff;
            border-color:#3a84ff;
        }

.bk-process > ul{
        display:table;
        width:100%;
        display:-webkit-box;
        display:flex;
        -ms-display:flex;
        -moz-display:flex;
        -webkit-display:flex;
        margin:auto;
        padding:0;
    }

.bk-process li{
        background-color:#f0f1f5;
        display:table-cell;
        -webkit-box-flex:1;
                flex:1;
        -ms-flex:1;
        -moz-flex:1;
        -webkit-flex:1;
        text-align:center;
        height:24px;
        line-height:24px;
        position:relative;
        font-size:12px;
        color:#63656e;
    }

.bk-process li i{
            display:none;
        }

.bk-process li .bk-process-item{
            display:inline-block;
        }

.bk-process li .bk-process-item > .bk-icon{
                font-size:14px;
            }

.bk-process li:first-of-type{
            border-radius:13px 0 0 13px;
        }

.bk-process li:last-of-type{
            border-radius:0 13px 13px 0
        }

.bk-process li:last-of-type::before{
                display:none;
            }

.bk-process li:last-of-type::after{
                display:none;
            }

.bk-process li::before{
            content:"";
            width:0;
            height:0;
            border:12px solid;
            border-color:transparent transparent transparent #fff;
            position:absolute;
            right:-25px;
            top:0;
            z-index:1;
        }

.bk-process li::after{
            content:"";
            width:0;
            height:0;
            border:12px solid;
            border-color:transparent transparent transparent #f0f1f5;
            position:absolute;
            right:-23px;
            top:0;
            z-index:1;
        }

.bk-process li .bk-process-step{
            color:#63656e;
            font-size:12px;
        }

.bk-process li .bk-process-step dd{
                margin:0;
                line-height:32px;
            }

.bk-process li .bk-process-step i{
                display:none;
            }

.bk-process li .bk-process-step .success i{
                    display:inline-block;
                    color:#2dcb56;
                }

.bk-process li .bk-process-step .steps-loading{
                top:1px;
                left:1px;
            }

.bk-process li .bk-process-step .step-item.error{
                    color:#ff5656;
                }

.bk-process li .bk-process-step .step-item.error .bk-icon{
                        color:#ff5656;
                        vertical-align:-2px;
                    }

.bk-process li .bk-process-step .step-item.done .bk-icon{
                        color:#2dcb56;
                    }

.bk-process li.success{
            background:#2dcb56;
            color:#fff
        }

.bk-process li.success::after{
                border-color:transparent transparent transparent #2dcb56;
            }

.bk-process li.success .bk-process-step i{
                    color:#2dcb56;
                }

.bk-process li.success i{
                display:inline-block;
            }

.bk-process li.status-error{
            background:#ff5656;
            color:#fff
        }

.bk-process li.status-error::after{
                border-color:transparent transparent transparent #ff5656;
            }

.bk-process li.status-error .bk-process-item > .bk-icon{
                display:inline-block;
            }

.bk-process li.status-error .bk-process-step .bk-icon{
                    display:inline-block;
                }

.bk-process li.status-done{
            background:#2dcb56;
            color:#fff
        }

.bk-process li.status-done::after{
                border-color:transparent transparent transparent #2dcb56;
            }

.bk-process li.status-done .bk-process-item > .bk-icon{
                display:inline-block;
            }

.bk-process li.status-done .bk-process-step .bk-icon{
                    display:inline-block;
                }

.bk-process li.status-loading .bk-process-item > .bk-icon{
                display:inline-block;
            }

.bk-process li.status-loading .bk-process-step .bk-icon{
                    display:inline-block;
                }

.bk-process li.status-default .bk-process-item > .bk-icon{
                display:inline-block;
            }

.bk-process li.status-default .bk-process-step .bk-icon{
                    display:inline-block;
                }

.bk-process li.current{
            background:#3a84ff;
            color:#fff
        }

.bk-process li.current::after{
                border-color:transparent transparent transparent #3a84ff;
            }

.bk-process li.current >.bk-spin-loading{
                vertical-align:-3px;
            }