@charset "utf-8";
.loading {
    display: none;
    position: fixed;
    top: 0;
    z-index: 10000;
}

.loading-body {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;
    transition: 0.5s ease-in-out;
    z-index: 101;
}

.loading-body svg {
    width: 54px;
    height: 54px;
    animation: spin 3s ease-in-out infinite;
}

.loading-body circle {
    stroke: white;
    stroke-width: 4;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: loading 1s ease-in-out infinite;
    fill: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading {
    from {
        stroke-dashoffset: 157;
    }
    80% {
        stroke-dashoffset: -147;
    }
    to {
        stroke-dashoffset: -157;
    }
}