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+

Editor's Note: This post was originally published in May 2015 and has been revised and updated for accuracy and comprehensiveness.

HTTP Headers for Wordpress

Make your website more secure by using the HTTP Headers for Wordpress, and never face a cross-origin issue again. Oh yes, it's FREE.

Download HTTP Headers v1.12.2

• Crawlable AJAX Applications
• Cross Domain AJAX Request
• Cross-Domain Iframe Resize
• Cross-Origin Resource Sharing
• AJAX File Upload

• W3C - HTML5 progress indicator
• W3C - Progress events
• MDN - HTML progress
• MDN - ProgressEvent

If you have a question about ajax request progress bar, please drop a comment below. Thanks so much for reading! Share if you like it.