.ripple,
.spinner-loading {
    position: absolute;
    top: 50%;
    left: 50%
}

.spinner-loading {
    width: 20vh;
    height: 20vh;
    background: url('../assets/spinner.png') center center/cover no-repeat;
    animation: 2s linear infinite spin-pulse;
    z-index: 993
}

.ripple {
    width: 100%;
    height: 100%;
    border: .25vh solid var(--secondary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: 3s linear infinite ripple;
    z-index: 991
}

.left-side-loading,
.right-side-loading {
    position: absolute;
    top: 0;
    left: -2.5%;
    width: 105%;
    height: 100%;
    background-color: #000;
    transition: transform 3s;
    z-index: 992
}

.ripple:nth-child(2) {
    animation-delay: 1s
}

.ripple:nth-child(3) {
    animation-delay: 2s
}

@keyframes spin-pulse {
    0% {
        transform: translate(-50%, -50%) rotate(0) scale(1)
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2)
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1)
    }
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(.3);
        opacity: 1
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0
    }
}

.left-side-loading {
    clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%)
}

.right-side-loading {
    clip-path: polygon(100% 0, 40% 0, 60% 100%, 100% 100%);
    transform: translateX(-1px)
}