Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Dojo Dojo Progress Bar

Related Tutorials


 
 

Share on Google+Share on Google+

Dojo Progress Bar

Advertisement
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.

Try Online: Progress Bar

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:

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 1, 2008

Related Tutorials

Discuss: Dojo Progress Bar   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
Pablo
August 20, 2011
How to do a real progress bar?

Hey, Thank you for this tuto, But I think it does pretty much nothing, because a real progress bar has to show the progress of an action, and what seems that you're doing here is like an animation, not a progress bar that for instance shows the loading progress of a page.
DMCA.com