.informat-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 使用标准的 transform 居中方式 */
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.informat-ring div {
    width: 30px;
    /* 替换 aspect-ratio (Chrome 88+ 才支持)，使用传统方式保持正方形 */
    height: 30px;
    border-radius: 50%;
    /* 明确写出透明色，避免浏览器解析问题 */
    border: 8px solid transparent;
    border-right-color: #fff;
    position: relative;
    animation: loading-ring 1s infinite linear;
}

.informat-ring div:before,
.informat-ring div:after {
    content: "";
    position: absolute;
    /* inset 属性在 Chrome 87+ 支持，替换为传统写法 */
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    border-radius: 50%;
    border: inherit;
    animation: inherit;
    animation-duration: 2s;
}

.informat-ring div:after {
    animation-duration: 4s;
}

/* 使用更语义化的动画名称 */
@keyframes loading-ring {
    100% {
        transform: rotate(360deg); /* 替换 1turn 为 360deg 保证兼容性 */
    }
}