.__preload-loading {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);

    /* 图案颜色 */
    --page-loading-color: #0052d9;
    /* 整体尺寸 */
    --page-loading-size: 70px;
    /* 轨道宽度 */
    --page-loading-border-width: calc(var(--page-loading-size) * 0.1);
    /* 轨道颜色 */
    --page-loading-border-color: #fff;
    /* 背景颜色 */
    --page-loading-background-color: #fff;
    /* 动画周期时长 */
    --page-loading-duration: 0.75s;
}

.__preload-loading .__loading-text {
    text-align: center;
    margin-top: 10px;
}

.__preload-loading .__loading-containner {
    background-color: var(--page-loading-border-color);
    border-radius: 50%;
    --webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, #0005);
    background: linear-gradient();
    animation: roll var(--page-loading-duration) ease-in-out infinite;
}

.__preload-loading .__loading-containner .__loading-cycle {
    width: var(--page-loading-size, 200px);
    height: var(--page-loading-size, 200px);
    position: relative;
}

.__preload-loading .__loading-containner .__loading-cycle:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(0, transparent, var(--page-loading-color));
    background-size: 50% 100%;
    border-top-left-radius: calc(var(--page-loading-size, 200px) * 0.5);
    border-bottom-left-radius: calc(var(--page-loading-size, 200px) * 0.5);
}

.__preload-loading .__loading-containner .__loading-cycle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: calc(var(--page-loading-size, 200px) * 0.1);
    height: calc(var(--page-loading-size, 200px) * 0.1);
    border-radius: 50%;
    background-color: var(--page-loading-color);
    box-shadow:
        0 0 20px var(--page-loading-color),
        0 0 40px var(--page-loading-color),
        0 0 50px var(--page-loading-color);
}

.__preload-loading .__loading-containner .__loading-cycle span {
    position: absolute;
    top: var(--page-loading-border-width, 10px);
    left: var(--page-loading-border-width, 10px);
    right: var(--page-loading-border-width, 10px);
    bottom: var(--page-loading-border-width, 10px);
    border-radius: 50%;
    background: var(--page-loading-background-color, #0005);
}

@keyframes roll {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}