.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #3f51b5;
    z-index: 9999;
}

.loader:before {
    display: block;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    /* Inicialmente sin ancho */
    height: 100%;
    background-color: #3f51b5;
    animation: loading 2s linear infinite;
}

@keyframes loading {
    0% {
        width: 0%;
        /* Comienza sin ancho */
    }

    50% {
        width: 50%;
        /* A la mitad del tiempo, ancho al 50% */
    }

    70% {
        width: 70%;
        /* Al 70% del tiempo, ancho al 70% */
    }

    80% {
        width: 90%;
        /* Al 80% del tiempo, ancho al 90% */
    }

    100% {
        width: 100%;
        /* Al finalizar, ancho al 100% (cubre todo el contenedor) */
    }
}