Categories
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.
- Crawlable AJAX Applications
- Cross Domain AJAX Request
- Cross-Domain Iframe Resize
- Cross-Origin Resource Sharing
- AJAX File Upload
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.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed