.__loading {
    overflow: hidden;
}

.loading__container {
    text-align: center;
}

.loading__container p {
    margin: 10px 0;
    font-size: 16px;
}

/*指令模式，函数调用loading使用定位*/
.loading-directive, .loading-fix {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 2000
}
/*指令模式，表格表体加载动画*/
.loading-table-directive{
    position: absolute;
    width: 100%;
    height: calc(100% - 45px);
    top: 45px;
    left: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 2000
}
.loading-fix {
    z-index: 9999
}

.loading__container.loading-directive .loading_line,
.loading__container.loading-directive .loading_spine,
.loading__container.loading-table-directive .loading_line,
.loading__container.loading-table-directive .loading_spine,
.loading__container.loading-fix .loading_line,
.loading__container.loading-fix .loading_spine {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/*竖线loading*/
.loading_line {
    position: relative;
}

.loading_line-row {
    display: flex;
    width: 110px;
    margin: auto;
    align-items: center;
}

.loading_line-row div {
    animation: line-scale 1.8s infinite ease;
    -ms-animation: line-scale 1.8s infinite ease;
    -moz-animation: line-scale 1.8s infinite ease;
    -webkit-animation: line-scale 1.8s infinite ease;
    background: #2b85e4;
    width: 10px;
    height: 60px;
    margin: 0 5px;
    border-radius: 180px;
    opacity: 0.5;
}

.loading_line-row .line-1 {
}

.loading_line-row .line-2 {
    animation-delay: -.1s;
    -webkit-animation-delay: -.1s;
    -moz-animation-delay: -.1s;
    -ms-animation-delay: -.1s;
}

.loading_line-row .line-3 {
    animation-delay: -.2s;
    -webkit-animation-delay: -.2s;
    -moz-animation-delay: -.2s;
    -ms-animation-delay: -.2s;
    opacity: 1;
}

.loading_line-row .line-4 {
    animation-delay: -.3s;
    -webkit-animation-delay: -.3s;
    -moz-animation-delay: -.3s;
    -ms-animation-delay: -.3s;
}

.loading_line-row .line-5 {
    animation-delay: -.4s;
    -webkit-animation-delay: -.4s;
    -moz-animation-delay: -.4s;
    -ms-animation-delay: -.4s;
}

/*雪花loading*/
.loading_spine {
}

.loading_spine-row {
    width: 60px;
    height: 60px;
    position: relative;
    margin: auto;
}

.loading_spine-row div {
    position: absolute;
    width: 100%;
    height: 12px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.loading_spine-row div i {
    display: block;
    width: 12px;
    height: 12px;
    background: #90959e;
    border-radius: 180px;
    animation: spine-scale 2s infinite ease;
    -ms-animation: spine-scale 2s infinite ease;
    -moz-animation: spine-scale 2s infinite ease;
    -webkit-animation: spine-scale 2s infinite ease;
}

.spine-1 {
}

.spine-2 {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.spine-3 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.spine-4 {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
}

.spine-1 .loading__left {
}

.spine-2 .loading__left {
    animation-delay: -.7s;
    -webkit-animation-delay: -.7s;
    -moz-animation-delay: -.7s;
    -ms-animation-delay: -.7s;
}

.spine-3 .loading__left {
    animation-delay: -.6s;
    -webkit-animation-delay: -.6s;
    -moz-animation-delay: -.6s;
    -ms-animation-delay: -.6s;
}

.spine-4 .loading__left {
    animation-delay: -.5s;
    -webkit-animation-delay: -.5s;
    -moz-animation-delay: -.5s;
    -ms-animation-delay: -.5s;
}

.spine-1 .loading__right {
    animation-delay: -.4s;
    -webkit-animation-delay: -.4s;
    -moz-animation-delay: -.4s;
    -ms-animation-delay: -.4s;
}

.spine-2 .loading__right {
    animation-delay: -.3s;
    -webkit-animation-delay: -.3s;
    -moz-animation-delay: -.3s;
    -ms-animation-delay: -.3s;
}

.spine-3 .loading__right {
    animation-delay: -.2s;
    -webkit-animation-delay: -.2s;
    -moz-animation-delay: -.2s;
    -ms-animation-delay: -.2s;
}

.spine-4 .loading__right {
    animation-delay: -.1s;
    -webkit-animation-delay: -.1s;
    -moz-animation-delay: -.1s;
    -ms-animation-delay: -.1s;
}

/*竖线动画*/
@keyframes line-scale {
    0%, 50%, 100% {
        transform: scaleY(0.4);
    }
    25%, 75% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes line-scale {
    0%, 50%, 100% {
        -webkit-transform: scaleY(0.4);
    }
    25%, 75% {
        -webkit-transform: scaleY(1);
    }
}

@-moz-keyframes line-scale {
    0%, 50%, 100% {
        -moz-transform: scaleY(0.4);
    }
    25%, 75% {
        -moz-transform: scaleY(1);
    }
}

@-ms-keyframes line-scale {
    0%, 50%, 100% {
        -ms-transform: scaleY(0.4);
    }
    25%, 75% {
        -ms-transform: scaleY(1);
    }
}

/*雪花动画*/
@keyframes spine-scale {
    0%, 50%, 100% {
        transform: scale(0.65);
        opacity: 0.5;
    }
    25%, 75% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes spine-scale {
    0%, 50%, 100% {
        -webkit-transform: scale(0.65);
        opacity: 0.5;
    }
    25%, 75% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-moz-keyframes spine-scale {
    0%, 50%, 100% {
        -moz-transform: scale(0.65);
        opacity: 0.5;
    }
    25%, 75% {
        -moz-transform: scale(1);
        opacity: 1;
    }
}

@-ms-keyframes spine-scale {
    0%, 50%, 100% {
        -ms-transform: scale(0.65);
        opacity: 0.5;
    }
    25%, 75% {
        -ms-transform: scale(1);
        opacity: 1;
    }
}