@keyframes circle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin {
    display: flex;
    width: 100%;
    height: 72.46rpx;
    font-size: 21.74rpx;
    line-height: 1.2;
    letter-spacing: 0;

    align-items: center;
    justify-content: center;
}

.spin.secure-bottom {
    padding-bottom: 72.46rpx;
}

.spin .spin-icon {
    width: 24.1546rpx;
    height: 24.1546rpx;
    margin-right: 9.66rpx;
    padding: 5.4347rpx;
    opacity: .3;
    border-radius: 50%;
    background-color: #2a2a31;
    background-clip: content-box;
    animation: feed-animate-loading .4s linear infinite forwards;
}

.spin.spin-hover-feedback {
    opacity: .2;
}

.spin .text {
    display: flex;
    overflow: hidden;
    font-size: 25.3623rpx;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333;

    align-items: center;
    justify-content: center;
}

@keyframes feed-animate-loading {
    0% {
        opacity: .3;
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
    }
    40% {
        -webkit-transform: rotateY(90deg);
                transform: rotateY(90deg);
    }
    50% {
        opacity: .6;
        -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
    }
    60% {
        -webkit-transform: rotateY(270deg);
                transform: rotateY(270deg);
    }
    100% {
        opacity: .3;
        -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
    }
}