Creates a reading indicator

readingIndicator.js

(function(){
    var Indicator = function(){
        var self = this, bar, latestKnownScrollY, ticking;
        
        this.init = function init() {
            latestKnownScrollY = window.scrollY;
            ticking = false;
            
            self.createIndicator();
            
            window.addEventListener('scroll', self.onScroll, false);
            self.onScroll();
        };
        
        this.createIndicator = function createIndicator() {
            bar = document.createElement('div');
            bar.style.position = "fixed";
            bar.style.top = 0;
            bar.style.left = 0;
            bar.style.right = 0;
            bar.style.display = "block";
            bar.style.width = "0%";
            bar.style.height = "1px";
            bar.style.backgroundColor = "#ff0000";
            bar.style.zIndex = 99999999;
            bar.style.WebkitTransition = 'all 0.5s';
            bar.style.MozTransition = 'all 0.5s';
            
            document.body.appendChild(bar);
        };
        
        this.onScroll = function onScroll(e) {
            var percentage = Math.floor(((getScrollPosition() + getWindowHeight()) / getMaxDocumentHeight()) * 100),
                color = (percentage >= 95) ? "#0000ff" : "#ff0000";

            bar.style.width = percentage + "%";
            bar.style.backgroundColor = color;
        };
        
        function getWindowHeight() {
            return window.innerHeight
                    || document.documentElement.clientHeight
                    || document.body.clientHeight
                    || 0;
        }
        
        function getMaxDocumentHeight() {
            return Math.max(
                    document.body.scrollHeight || 0
                    ,document.documentElement.scrollHeight || 0
                    ,document.body.offsetHeight || 0
                    ,document.documentElement.offsetHeight || 0
                    ,document.body.clientHeight || 0
                    ,document.documentElement.clientHeight || 0
                   );
        }
        
        function getScrollPosition() {
            return window.pageYOffset
                    || document.body.scrollTop
                    || document.documentElement.scrollTop
                    || 0;
        }
        
        self.init();
    };
    
    new Indicator();
}());