Dojo Progress Bar
In this section, you will learn about the progress bar and how to create a progress bar in dojo.
Progress Bar : The progress bar is a GUI (Graphical User Interface) that gives dynamic feedback on the progress of a long-running operation. The progress bar can be updated by calling the JavaScript functions. Which works best for long-running JavaScript operations or a series of JavaScript XHR calls to the server. Progress bar performs to multiple types of works such as: download or upload any files and representation of the progress in a percent format.
Here is the code of Program:
<html> <head> <title>Progress Bar Demo</title> <style type="text/css"> @import "../resources/dojo.css"; @import "../dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dijit.ProgressBar"); dojo.require("dojo.parser"); function download(){ // Split up bar into 5% segments numParts = Math.floor(100/5); jsProgress.update({ maximum: numParts, progress:0 }); for (var i=0; i<=numParts; i++){ // This plays update({progress:0}) at 1nn milliseconds, // update({progress:1}) at 2nn milliseconds, etc. setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 + Math.floor(Math.random()*100)); } } </script> </head> Progress Bar: <body class="tundra"> <div dojoType="dijit.ProgressBar" style="width:800px" jsId="jsProgress" id="downloadProgress"></div> <input type="button" value="Start" onclick="download();" /> </body> </html>
Output of the Program:
When you click the "Start" command button then you get: