.lds-spin {
    display: inline-block;
    transform: translateZ(1px);
}

    .lds-spin > i {
        margin-top: 2em;
        padding: 30px;
        border-radius: 65%;
        display: inline-block;
        box-shadow:  inset 0 0 50px #fff, /* inner white */
            inset 20px 0 80px #f0f, /* inner left magenta short */
            inset -20px 0 80px #0ff, /* inner right cyan short */
            inset 20px 0 300px #f0f, /* inner left magenta broad */
            inset -20px 0 300px #0ff, /* inner right cyan broad */
            0 0 50px #fff, /* outer white */
            -10px 0 80px #f0f, /* outer left magenta */
            10px 0 80px #0ff; /* outer right cyan */
        animation: lds-spin 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        color: floralwhite;
    }



.custom {
    background: transparent;
    
}

@keyframes lds-spin {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }

    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(1800deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    100% {
        transform: rotateY(3600deg);
    }
}