Progress Bar using javascript

Question

I want to show a processing bar to the user.

The problem statement:- The user has a number of transactions to approve. When he multi selects say 10-20 transactions and approves by clicking on the approve I have to send each data via AJAX, process it one by one & then after I finish i will have to show the user the status that all transactions have been processed.

The processing takes time.Show I have to show a processing bar

Answer 1

Have the server respond to each request with the percentage that has been completed. Then update the background-position of the background-image of a rectangle shaped div to match the percentage returned by the server on any given response.

Answer 2

Display a progress bar using CSS and update it's width setting each time a transaction is finished and before a new one starts.

If you use any Javascript client library you'll probably find third party plugin for progress bar functionality to make it easier on you to develop your own.

Answer 3

my suggestion would be to use the jQuery-ui progress bar.

Calculate how many ajax requests your going to make and then each time you complete one of the ajax requests you can calculate the percentage completion and update the progress bar.

this would set up your progress bar;

var progressbar = $("<div></div>").appendTo('body').progressbar({value: 0});

this would change the progress bar position;

progressbar.progressbar('value', parseInt((completed_ajax_requests / total_ajax_requests) * 100));