.loading-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
}

.loading-center {}

.loading-content {
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .59);
    padding: 15px 10px;
}

.loading-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.loading-box {
    position: relative;
    width: 40px;
    height: 40px;
}

.loading-content .txt {
    color: #fff;
    margin-left: 15px;
    font-size: 16px;
}

.circlebox {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}

.circlebox p {
    width: 12px;
    height: 12px;
    background-color: #FF1276;
    position: absolute;
    border-radius: 50%;
    animation: move 1.5s infinite linear;
}

.circlebox p:nth-of-type(1) {
    left: 0;
    top: 0;
}

.circlebox p:nth-of-type(2) {
    right: 0;
    top: 0;
}

.circlebox p:nth-of-type(3) {
    right: 0;
    bottom: 0;
}

.circlebox p:nth-of-type(4) {
    left: 0;
    bottom: 0;
}

.circlebox:nth-child(2) {
    transform: rotate(45deg);
}

@keyframes move {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.circlebox:nth-of-type(1) p:nth-of-type(1) {
    animation-delay: -0.1s;
}

.circlebox:nth-of-type(2) p:nth-of-type(1) {
    animation-delay: -0.3s;
}

.circlebox:nth-of-type(1) p:nth-of-type(2) {
    animation-delay: -0.5s;
}

.circlebox:nth-of-type(2) p:nth-of-type(2) {
    animation-delay: -0.7s;
}

.circlebox:nth-of-type(1) p:nth-of-type(3) {
    animation-delay: -0.9s;
}

.circlebox:nth-of-type(2) p:nth-of-type(3) {
    animation-delay: -1.1s;
}

.circlebox:nth-of-type(1) p:nth-of-type(4) {
    animation-delay: -1.2s;
}

.circlebox:nth-of-type(2) p:nth-of-type(4) {
    animation-delay: -1.4s;
}