Home Dojo Dojo Progress Bar

Dojo Progress Bar
Posted on: November 1, 2008 at 12:00 AM

In this section, you will learn about the progress bar and how to create a progress bar in dojo.

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:

Try Online:

Related Tags for Dojo Progress Bar:
c, dojo, io, this, create, progress, to, learn, ear, e, il, bar, section, in, out, j, es, how, pro, do, s, ess, at, is, ll, gre, ea, and, ar, s, s, th, ab, pr, nd, on, ogr, o

«Previous Index Next»