Progress Indicator for AJAX Request

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

BROWSER COMPATIBILITY

Chrome 8+, Firefox 6+, IE10+, Opera 11.5+, Safari 6+