#loadingBlock{
    background-color: rgb(41, 42, 44);
}
.loadingContainer {
    width: 70px;
    height: 70px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    -webkit-animation: spin 5s infinite linear;
    animation: spin 5s infinite linear;
}
.percentText {
    font-size: 14px;
    font-weight: lighter;
    color: white;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    transform: translate(-50%, -50%);
}
.circle {
    width: 100%;
    height: 100%;
    position: absolute;
}
.circle .inner {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid rgba(22,164,192,0.7);
    border-right: none;
    border-top: none;
    box-shadow: inset 0 0 10px rgba(22,164,192,0.15);
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.circle:nth-of-type(0) {
    transform: rotate(0deg);
}
.circle:nth-of-type(0) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.circle:nth-of-type(1) {
    transform: rotate(70deg);
}
.circle:nth-of-type(1) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.circle:nth-of-type(2) {
    transform: rotate(140deg);
}
.circle:nth-of-type(2) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.tip-text {
    position: absolute;
    white-space: nowrap;
    /* 动画属性 */
    transition: opacity 0.4s ease, transform 0.4s ease;
    left: 50%;
    bottom: 15%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    color: rgba(255,255,255,0.8);
}

.tip-hide {
    opacity: 0;
    transform: translate(-50%, -80%); /* 比原位置上移一些 */
}

/* 显示：恢复到原位置 */
.tip-show {
    opacity: 1;
    transform: translate(-50%, -50%);
}