This is Skunk.

Skunk is a responsive horizontal javascript scrollbar
that is a breeze to implement.

The HTML

<div id="scrollbar">
    <div id="scrollbar-bg"></div>
</div>
            

The CSS

#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0%;
    height: 5px;
    z-index: 9999;
}

#scrollbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E16036;
}
            

The JavaScript

There's a pure JavaScript version and a jQuery version below it.
Make sure you have jQuery included in your site when using its version.

var bar_bg = document.getElementById("scrollbar-bg"),
    body = document.body,
    html = document.documentElement;

bar_bg.style.minWidth = document.width + "px";

document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}

window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);

    bar.style.width = bw + "%";
}
            

jQuery

var bar_bg = $("#scrollbar-bg");
bar_bg.css("min-width", $(document).width() + "px");

$(window).resize(function() {
    bar_bg.css("min-width", $(document).width() + "px");
});

$(window).scroll(function(e) {
    // Change the width of the progress bar
    var bar = $("#scrollbar"),
        dw  = $(document).width(),
        dh  = $(document).height(),
        wh  = $(window).height(),
        pos = $(document).scrollTop(),
        bw  = ((pos / (dh - wh)) * 100);

    bar.css("width", bw + "%");
});
            

Now just scroll down and enjoy the effect!