.loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    position: relative; /* Necessário para o posicionamento absoluto dos filhos */
}

    .loader:before,
    .loader:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        transform: rotateX(70deg);
        animation: spin 1s linear infinite;
    }

    .loader:after {
        background-color: #FF3D00; /* Cor do segundo loader */
        transform: rotateY(70deg);
        animation-delay: .4s; /* Atraso na animação do segundo loader */
    }

@keyframes spin {
    0%, 100% {
        box-shadow: .2em 0px 0 0px currentColor;
    }

    12% {
        box-shadow: .2em .2em 0 0 currentColor;
    }

    25% {
        box-shadow: 0 .2em 0 0px currentColor;
    }

    37% {
        box-shadow: -.2em .2em 0 0 currentColor;
    }

    50% {
        box-shadow: -.2em 0 0 0 currentColor;
    }

    62% {
        box-shadow: -.2em -.2em 0 0 currentColor;
    }

    75% {
        box-shadow: 0px -.2em 0 0 currentColor;
    }

    87% {
        box-shadow: .2em -.2em 0 0 currentColor;
    }
}