bk-magic-vue/lib/ui/spin.css

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

.bk-spin{
    display:inline-block;
    position:relative;
    text-align:center;
    vertical-align:middle;
}

.bk-spin .bk-spin-rotation{
        position:relative;
    }

.bk-spin .bk-spin-rotation .rotate{
            position:absolute;
            top:77%;
            right:43%;
            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:fadePrimary;
                    animation-name:fadePrimary;
            -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 .bk-spin-rotation.bk-spin-rotation-default .rotate{
                -webkit-animation-name:fadeDefault;
                        animation-name:fadeDefault;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-primary .rotate{
                -webkit-animation-name:fadePrimary;
                        animation-name:fadePrimary;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-success .rotate{
                -webkit-animation-name:fadeSuccess;
                        animation-name:fadeSuccess;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-danger .rotate{
                -webkit-animation-name:fadeDanger;
                        animation-name:fadeDanger;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-warning .rotate{
                -webkit-animation-name:fadeWarning;
                        animation-name:fadeWarning;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-info .rotate{
                -webkit-animation-name:fadeInfo;
                        animation-name:fadeInfo;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-default-wait .rotate{
                background-color:#c4c6cc;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-primary-wait .rotate{
                background-color:#3c96ff;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-success-wait .rotate{
                background-color:#2dcb56;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-danger-wait .rotate{
                background-color:#ff5656;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-warning-wait .rotate{
                background-color:#ffb848;
            }

.bk-spin .bk-spin-rotation.bk-spin-rotation-info-wait .rotate{
                background-color:#63656e;
            }

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

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

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

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

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

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

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

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

.bk-spin .bk-spin-rotation-flex{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-negative:0;
            flex-shrink:0;
    }

.bk-spin .bk-spin-rotation-margin{
        margin:0 auto;
    }

.bk-spin .bk-spin-rotation-large{
        width:69px;
        height:69px;
    }

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

.bk-spin .bk-spin-rotation-normal{
        width:49px;
        height:49px;
    }

.bk-spin .bk-spin-rotation-normal .rotate{
            width:6px;
            height:9px;
            -webkit-transform-origin:50% -13px;
                    transform-origin:50% -13px;
        }

.bk-spin .bk-spin-rotation-small{
        width:27px;
        height:27px;
    }

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

.bk-spin .bk-spin-rotation-mini{
        width:16px;
        height:16px;
    }

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

.bk-spin .bk-spin-icon{
        color:#3c96ff;
        font-size:16px;
        -webkit-animation:icon-loading 1.2s linear infinite;
                animation:icon-loading 1.2s linear infinite;
    }

.bk-spin .bk-spin-icon i{
            vertical-align:middle
        }

.bk-spin .bk-spin-icon-wait{
        -webkit-animation:none;
                animation:none;
    }

.bk-spin .bk-spin-icon-default{
        color:#c4c6cc;
    }

.bk-spin .bk-spin-icon-primary{
        color:#3c96ff;
    }

.bk-spin .bk-spin-icon-success{
        color:#2dcb56;
    }

.bk-spin .bk-spin-icon-warning{
        color:#ffb848;
    }

.bk-spin .bk-spin-icon-danger{
        color:#ff5656;
    }

.bk-spin .bk-spin-icon-info{
    	color:#979ba5;
    }

.bk-spin .bk-spin-icon-large i{
            font-size:69px;
        }

.bk-spin .bk-spin-icon-normal i{
            font-size:49px;
        }

.bk-spin .bk-spin-icon-small i{
            font-size:27px;
        }

.bk-spin .bk-spin-icon-nimi i{
            font-size:16px;
        }

.bk-spin .bk-spin-title{
        text-align:center;
        font-size:14px;
        color:#63656e;
        line-height:normal;
        line-height:initial;
        max-width:100%;
    }

.bk-spin .bk-spin-title-right{
        display:inline-block;
        padding-left:8px;
    }

.bk-spin .bk-spin-title-bottom{
        margin-top:8px;
    }

.bk-spin .bk-spin-title-large{
        height:69px;
    }

.bk-spin .bk-spin-title-normal{
        height:49px;
    }

.bk-spin .bk-spin-title-small{
        height:27px;
    }

.bk-spin .bk-spin-title-mini{
        height:16px;
    }

.bk-spin .bk-display-flex{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
    }

@-webkit-keyframes fadeDefault{
    0%{
        background-color:#c4c6cc;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeDefault{
    0%{
        background-color:#c4c6cc;
    }

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

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

    100%{
        background-color:none;
    }
}

@-webkit-keyframes fadeInfo{
    0%{
        background-color:#979ba5;
    }

    100%{
        background-color:none;
    }
}

@keyframes fadeInfo{
    0%{
        background-color:#979ba5;
    }

    100%{
        background-color:none;
    }
}

@-webkit-keyframes icon-loading{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}

@keyframes icon-loading{
    0%{
        -webkit-transform:rotate(0deg);
                transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
                transform:rotate(360deg);
    }
}