js code for webpage download progress bar

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<div id="a1" data-filename="filename.xml">Click to download</div>
3<script>
4$('#a1').click(function() {
5    var that = this;
6    var page_url = 'download.php';
7
8    var req = new XMLHttpRequest();
9    req.open("POST", page_url, true);
10    req.addEventListener("progress", function (evt) {
11        if(evt.lengthComputable) {
12            var percentComplete = evt.loaded / evt.total;
13            console.log(percentComplete);
14        }
15    }, false);
16
17    req.responseType = "blob";
18    req.onreadystatechange = function () {
19        if (req.readyState === 4 && req.status === 200) {
20            var filename = $(that).data('filename');
21            if (typeof window.chrome !== 'undefined') {
22                // Chrome version
23                var link = document.createElement('a');
24                link.href = window.URL.createObjectURL(req.response);
25                link.download = filename;
26                link.click();
27            } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
28                // IE version
29                var blob = new Blob([req.response], { type: 'application/force-download' });
30                window.navigator.msSaveBlob(blob, filename);
31            } else {
32                // Firefox version
33                var file = new File([req.response], filename, { type: 'application/force-download' });
34                window.open(URL.createObjectURL(file));
35            }
36        }
37    };
38    req.send();
39});
40</script>