Progress Indicator for AJAX Request

HTML PROGRESS ELEMENT

<progress id="progress" value="0"></progress>

• max – specifies how much work the task requires in total. Must be a floating-point number > 0
• value – specifies how much of the task has been completed. Must be a floating-point number >= 0 and <= max

PROGRESS EVENTS

• lengthComputable – a read-only (Boolean) property indicating if the resource concerned by the ProgressEvent has a length that can be calculated
• total – a read-only (Unsigned Long) property representing the total amount of work that the underlying process is in the progress of performing
• loaded – a read-only (Unsigned Long) property representing the amount of work already performed by the underlying process

• onloadstart – the request starts
• onprogress – transmitting data
• onabort – request has been aborted
• onerror – the request has failed
• onload – the request has successfully completed
• ontimeout – the timeout has passed before the request completed
• onloadend – the request has completed

UPLOAD PROGRESS

<script type="text/javascript">
var progressBar = document.getElementById("progress"),
    xhr = new XMLHttpRequest();
xhr.open("POST", "https://zinoui.com/demo/progress-bar/upload.php", true);
xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
    }
}
xhr.upload.onloadstart = function (e) {
    progressBar.value = 0;
}
xhr.upload.onloadend = function (e) {
    progressBar.value = e.loaded;
}
xhr.send(new FormData());
</script>

xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
        var ratio = Math.floor((e.loaded / e.total) * 100) + '%';
        console.log(ratio);
    }
}

DEMO

DOWNLOAD PROGRESS

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://zinoui.com/demo/progress-bar/test.csv?" + Math.floor(Math.random() * 99999), true);
xhr.responseType = "text";
xhr.onprogress = function(e) {
    if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
    }
};
xhr.onloadstart = function(e) {
    progressBar.value = 0;
};
xhr.onloadend = function(e) {
    progressBar.value = e.loaded;
};
xhr.send(null);

BROWSER COMPATIBILITY