.loading {
    position: relative;
}

.loading div {
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50%;
}

.loading div:nth-child(1) {
    background-color: #1abd9c;
}

.loading div:nth-child(2) {
    background-color: #0081e2;
}

html .loading-wrapper {
    background-color: white;
}

html .loading-wrapper .loading-info {
    color: #666;
}

html .loading-wrapper.loading-extension {
    background-color: rgba(0, 0, 0, .6);
}

html .loading-wrapper.loading-extension .loading-content {
    background-color: white;
}

html[theme='dark'] .loading-wrapper {
    background-color: #333;
}

html[theme='dark'] .loading-wrapper .loading-info {
    color: rgba(255, 255, 255, .6);
}

html[theme='dark'] .loading-wrapper.loading-extension .loading-content {
    background-color: #383838;
}

/****************************************************************************
                                带文本
*****************************************************************************/

.loading-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.loading-wrapper .loading-info {
    font-size: 14px;
    color: rgba(255,255,255,85%);
    opacity: 0.8;
    margin: 12px 0 0 0;
}

html .loading-wrapper.loading-extension .loading-content {
    padding: 36px;
    border-radius: 4px;
}

.loading-wrapper.loading-extension .loading-content .loading {
    width: 88px !important;
    height: 44px !important;
    margin: 0 auto;
}

/****************************************************************************
                                custom 88*44
*****************************************************************************/
@keyframes move-left{
    0% {
        transform: translateX(0);
        z-index: 2;
    }
    50% {
        transform: translateX(44px);
        z-index: 2;
    }
    51% {
        transform: translateX(44px);
        z-index: 1;
    }
    100% {
        transform: translateX(0);
        z-index: 1;
    }
}

@keyframes move-right{
    0% {
        transform: translateX(44px);
        z-index: 1;
    }
    50% {
        transform: translateX(0);
        z-index: 1;
    }
    51% {
        transform: translateX(0);
        z-index: 2;
    }
    100% {
        transform: translateX(44px);
        z-index: 2;
    }
}

.loading {
    width: 88px !important;
    height: 44px !important;
}

.loading div:nth-child(1) {
    animation: move-left 1s linear infinite;
}

.loading div:nth-child(2) {
    animation: move-right 1s linear infinite;
}

/****************************************************************************
                                mid 64*32
*****************************************************************************/
@keyframes loading-green-mid {
    0% {
        transform: translateX(0);
        z-index: 2;
    }
    50% {
        transform: translateX(32px);
        z-index: 2;
    }
    51% {
        transform: translateX(32px);
        z-index: 1;
    }
    100% {
        transform: translateX(0);
        z-index: 1;
    }
}

@keyframes loading-blue-mid {
    0% {
        transform: translateX(32px);
        z-index: 1;
    }
    50% {
        transform: translateX(0);
        z-index: 1;
    }
    51% {
        transform: translateX(0);
        z-index: 2;
    }
    100% {
        transform: translateX(32px);
        z-index: 2;
    }
}

.loading.mid {
    width: 64px !important;
    height: 32px !important;
    /* margin-top: 16px; */
}

.loading-wrapper .loading-info.mid {
    /* margin: 8px 0 0 0; */
    margin-top: 16px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
}

.loading.mid div:nth-child(1) {
    animation: loading-green-mid 1s linear infinite;
}

.loading.mid div:nth-child(2) {
    animation: loading-blue-mid 1s linear infinite;
}

/****************************************************************************
                                min 24*12
*****************************************************************************/
@keyframes loading-green-min {
    0% {
        transform: translateX(0);
        z-index: 2;
    }
    50% {
        transform: translateX(12px);
        z-index: 2;
    }
    51% {
        transform: translateX(12px);
        z-index: 1;
    }
    100% {
        transform: translateX(0);
        z-index: 1;
    }
}

@keyframes loading-blue-min {
    0% {
        transform: translateX(12px);
        z-index: 1;
    }
    50% {
        transform: translateX(0);
        z-index: 1;
    }
    51% {
        transform: translateX(0);
        z-index: 2;
    }
    100% {
        transform: translateX(12px);
        z-index: 2;
    }
}

.loading.min {
    width: 24px !important;
    height: 12px !important;
}

.loading.min div:nth-child(1) {
    animation: loading-green-min 1s linear infinite;
}

.loading.min div:nth-child(2) {
    animation: loading-blue-min 1s linear infinite;
}