Categories

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

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.


11 Comments

Marvin Nowotny
Hi,
your solution won't work in newer chrome (17+) versions.
Dimitar Ivanov
Hey @Marvin,
FYI, since version 31, Chrome supports XMLHttpRequest advanced features (known also as Level 2) as AJAX file uploads and transfer progress information.

* Example code edited.
Alfons
Hi, interresting work!

Can you also show the file upload.php.
Thanks in advance.

BR
Alfons
Fernando
It's great with the bar but how can I download the file? I saw only the process. Thanks!
andres jimenez
what is the code in upload.php??
geranjian
as would be the example with jquery??
Amit
Can you please provide the code of upload.php
Ngoai Ngu Phuong Dong
Ngoai Ngu Phuong Dong January 11, 2017 at 01:02 am
Please post full demo for download. Thanks!
Thomas
Great solution!
Can you also Show the file upload.php?
Thanks!
Diego
Complete example please!!
Neeraj Kumar
Can you tell which file include in jsp. like <script src="?????">. i run this code but not working. please contact me on this id neeraj.kumar@traveloes.com

Leave a comment

Captcha