loading-bar-partial.html

<div class="loading-bar"></div>

<style>
    .loading-bar {
        display: none;
        opacity: 0;
        position: absolute;

        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;

        background: red;
        height: 0;
        animation-name: expand-width, fade;
        animation-duration: 1s, 4s;
        animation-delay: 0s, 1s;

        animation-iteration-count: 1;
    }

    .loading-bar.visible {
        display: block;
        opacity: 1;
        height: 2px;
    }

    @keyframes fade {
        from {
            height: 2px;
            opacity: 1;
        }
        to {
            height: 0;
            opacity: 0;
        }
    }

    @keyframes expand-width {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes glow {
        from {
            box-shadow: 0 0 5px red,
            0 0 10px red,
            0 0 10px rgba(255, 165, 0, 1),
            0 0 20px rgb(255, 244, 0);
        }
        to {
            box-shadow: none;
        }

    }

    .loading-bar.visible:before {
        box-shadow: none;

        position: absolute;
        right: 0;
        content: "";
        display: block;
        height: 2px;
        width: 8px;
        animation-name: glow;
        animation-duration: 5s;
        animation-iteration-count: 1;
    }


</style>

<script>
    var links = document.querySelectorAll( 'a' ),
            linkslen = links.length;

    for ( var link = 0; link < linkslen; link++ ) {

        links[link].addEventListener( 'click', function ( e ) {
            //e.preventDefault();
            var lb = document.querySelectorAll( '.loading-bar' )[0];
            lb.classList.remove( 'visible' );
            //noinspection SillyAssignmentJS
            // triggers reflow
            lb.offsetHeight = lb.offsetHeight;
            lb.classList.add( 'visible' );
        }, false )
    }
</script>