Loading a really big js file while providing user feedback via a progress bar

long_load.js

(function() {
    var totalcss = 0;
    var totaljs = 0;
    var loadedjs = 0;
    var loadedcss = 0;
    var hasCss = false;
    var hasJs = false;
    var doStyle = function() {
        var src = cssxhr.responseText;
        var head = document.head || document.getElementsByTagName('head')[0];
        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.stylesheet) {
            style.stylesheet.cssText = src;
        }
        else {
            style.appendChild(document.createTextNode(src));
        }
        head.appendChild(style);
    };
    var doJs = function() {
        eval(jsxhr.responseText);
    };
    var compute = function() {
        if (hasCss && hasJs) {
            document.getElementById("loading-loader").style.width = "100%";
            setTimeout(function() {
                doStyle();
                document.getElementById("content").innerHTML = "";
                setTimeout(function() {
                    doJs();
                }, 50);
            }, 100);
        }
    };
    var jsxhr = new XMLHttpRequest();
    jsxhr.upload.addEventListener("progress", function (evt) {
        if(evt.lengthComputable) {
            totaljs = evt.total;
            loadedjs = evt.loaded;
            var total = totalcss + totaljs;
            var loaded = loadedcss + loadedjs;
            var percent = loaded / total * 100;
            document.getElementById("loading-loader").style.width = percent + "%";
        }
    }, false);
    jsxhr.addEventListener("progress", function(evt) {
        if(evt.lengthComputable) {
            totaljs = evt.total;
            loadedjs = evt.loaded;
            var total = totalcss + totaljs;
            var loaded = loadedcss + loadedjs;
            var percent = loaded / total * 100;
            document.getElementById("loading-loader").style.width = percent + "%";
        }
    }, false);
    jsxhr.addEventListener("readystatechange", function() {
        if (jsxhr.readyState == 4 && jsxhr.status == 200) {
            hasJs = true;
            compute();
        }
    }, false);
    var cssxhr = new XMLHttpRequest();
    cssxhr.upload.addEventListener("progress", function (evt) {
        if(evt.lengthComputable) {
            totalcss = evt.total;
            loadedcss = evt.loaded;
            var total = totalcss + totaljs;
            var loaded = loadedjs + loadedcss;
            var percent = loaded / total * 100;
            document.getElementById("loading-loader").style.width = percent + "%";
        }
    }, false);
    cssxhr.addEventListener("progress", function(evt) {
        if(evt.lengthComputable) {
            totalcss = evt.total;
            loadedcss = evt.loaded;
            var total = totalcss + totaljs;
            var loaded = loadedjs + loadedcss;
            var percent = loaded / total * 100;
            document.getElementById("loading-loader").style.width = percent + "%";
        }
    }, false);
    cssxhr.addEventListener("readystatechange", function() {
        if (cssxhr.readyState == 4 && cssxhr.status == 200) {
            hasCss = true;
            compute();
        }
    }, false);
    jsxhr.open("GET", "/assets/scripts.js", true);
    cssxhr.open("GET", "/assets/styles.css", true);
    jsxhr.send();
    cssxhr.send();
})();