.carga-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: transparent;
}

.carga-top.is-on {
    opacity: 1;
    visibility: visible;
}

.carga-top-barra {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 0 2px 2px 0;
    background: #3dcc78;
    box-shadow: 0 0 8px rgba(61, 204, 120, .55);
    transform-origin: left center;
    transition: width .16s linear;
}

.carga-top.is-out {
    opacity: 0;
    transition: opacity .08s linear;
}

@media (prefers-reduced-motion: reduce) {
    .carga-top-barra,
    .carga-top.is-out { transition: none; }
}