#ypTopbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100060;
    pointer-events: none;
    opacity: 0;
    background: rgba(239, 85, 38, .14);
    transition: opacity .2s ease;
}

#ypTopbar > span {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #ef5526, #ff8c42);
    box-shadow: 0 0 10px rgba(239, 85, 38, .8);
    will-change: transform;
}

#ypTopbar.is-active { opacity: 1; }
#ypTopbar.is-active > span { animation: ypbar 8s cubic-bezier(.12, .7, .25, 1) forwards; }

#ypTopbar.is-done > span {
    transform: scaleX(1);
    animation: none;
    transition: transform .18s ease-out, opacity .3s ease .18s;
    opacity: 0;
}

@keyframes ypbar {
    0%   { transform: scaleX(0); }
    35%  { transform: scaleX(.55); }
    70%  { transform: scaleX(.82); }
    100% { transform: scaleX(.96); }
}