:root {
    --loader-color: #7437F9;
    --background: #FFF
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background);
}

    .loader-wrapper.hide {
        visibility: hidden;
    }

.loader {
    position: relative;
    display: flex;
}

    .loader:before, .loader:after {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        position: relative;
        margin: 0 5px;
        border-radius: 50%;
        color: var(--loader-color);
        background: currentColor;
        box-shadow: 50px 0, -50px 0;
        animation: left 1s infinite ease-in-out;
    }

    .loader:after {
        color: var(--loader-color);
        animation: right 1.1s infinite ease-in-out;
    }


@keyframes right {
    0%, 100% {
        transform: translateY(-10px)
    }

    50% {
        transform: translateY(10px)
    }
}

@keyframes left {
    0%, 100% {
        transform: translateY(10px)
    }

    50% {
        transform: translateY(-10px)
    }
}