ajax xhr progress,AJAX Progress Bar | XmlHttpRequest Progress Indicator | HTML Progress Element

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 element represents the completion progress of a task.

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.

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

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.

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.

Related topics

Further reading

Social sharing

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.