Using a progress bar to report progress updates
As its name indicates, a progress bar can be used to notify the user that progress is being made at each step of a long-running operation.
This recipe explains how it is accomplished by using a progress bar to indicate when each of the 10 steps of a fictitious long-running operation are executed:
How to do it...
1. Create an object that will encapsulate the simulation of a long-running operation:
var Loader = function() { }
2. Inside the
Loader
class, create a function that will update the progress bar status:var f = function(v, pbar, btn, count, cb) { return function() { if (v > count) { btn.dom.disabled = false; cb(); } else { pbar.updateProgress(v / count, 'Loading item ' + v + ' of ' + count + '...'); } }; };
3. The
start()
method of theLoader
class will trigger the simulation of a long-running operation:return { start: function(pbar, btn, count, cb) { btn.dom.disabled = true; var ms = 5000 / count; for (var i = 1; i < (count + 2...