How to indicate progress in Javascript?

Question

Here is the function to fetch data;

var xhr = createCORSRequest('GET', url);
if (!xhr) {
    alert('CORS not supported');
    return;
}
xhr.onload = function() {
    var txt1 = xhr.responsetxt1;
    var heading = getheading(txt1);

    if (heading == 'PASS') {
        var file = "My_URL" + ".js";
        downloadFile(file);
        //My code to display a progress bar here?
    } else {
        //Logic to handle failure to load
    }
};

Here is my downloadFile function to download the file. But, I don't understand how to:

• Check if the download completed.
• Display a progress bar to show the progress.

If you can add a description of how it works, that'd be great. Thanks.

function downloadFile(fileName) {
    (function(d) {
        var ref = d.getElementsByTagName('script')[0];
        var js = d.createElement('script');
        js.src = fileName;
        ref.parentNode.insertBefore(js, ref);
        // My code to display a progress bar here?
    }(document));
}

EDIT: This is not a duplicate. Please note my question is NOT about xhr.onload - onload function only gets called after the communication is established with the server. My question is for future download requests as in the downloadFile function. Please be mindful before you flag something. Thanks.