Progress Indicator for AJAX Request

Posted on: January 9, 2016 by Dimitar Ivanov

There are a number of situations when you need to indicate a task progress. For example a file download, upload, plugin install or a simple AJAX request. It's easy to display the progression using the HTML progress element and JavaScript to manipulate it values.

HTML progress element

The <progress> element represents the completion progress of a task.

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

HTML5 progress element supports following attributes:

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

Progress events supports following attributes:

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

The following event handlers are supported for XMLHttpRequest and XMLHttpRequestUpload objects:

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

Now let's use the ProgressEvent API to visualize the completion level of an AJAX Upload request.

<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>

The ratio of work done can be calculated with the ProgressEvent loaded and total properties.

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

Demo

Download progress

A practical example of progression for file downloads through XMLHttpRequest interface.

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);