ProgressBar
A ProgressBar gives dynamic feedback on the progress of a long-running operation. The progress can be updated by JavaScript function calls. This method works best for long-running JavaScript operations, or a series of JavaScript XHR calls to the server.
Examples
This progress meter is updated using JavaScript

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Progress Bar Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/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 7% segments
numParts = Math.floor(100/7);
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>
<body class="tundra">
<div dojoType="dijit.ProgressBar" style="width:300px"
jsId="jsProgress" id="downloadProgress"></div>
<input type="button" value="Go!" onclick="download();" />
</body></html>
See the API docs for more information on update().
Suppose you do not know the maximum up front. ProgressMeter has an indeterminate version, which does not display a percentage bar. Instead, an animation indicates that something is happening.
This code fragment displays the indeterminate progress meter while performing an XHR call. The time spent for the call is used to estimate the length of 10 calls, which will then be used as the maximum value. (Note: you will need to provide your own XHR url here.)
dojo.addOnLoad(function() { // This starts the indeterminate bar dijit.byId("setTestBar").update({indeterminate: true}); // Do a call to see what the average response time is timeStart = new Date(); var d = dojo.xhrGet({ url: "../services/waste_time.jsp", handleAs: "text" }); d.addCallback(function() { // Stop the indeterminate bar dijit.byId("setTestBar").update({indeterminate: false}); avgTime = new Date() - timeStart; //Now you can estimate the time for 10 calls avgTime10 = avgTime * 10; dijit.byId("setTestBar").update({maximum: avgTime10}); }); });
dijit.ProgressBar
a progress widget
|
||
Attributes
|
||
indeterminate | Boolean false |
Default is false. Show progress true: show that a process is underway but that the progress is unknown |
maximum | Float 100 |
Maximum value possible |
places | Number 0 |
number of places to show in values; 0 by default |
progress | String "0" |
(Percentage or Number) initial progress value. with "%": percentage value, 0% <= progress <= 100% or without "%": absolute value, 0 <= progress <= maximum |
Methods
|
||
update(/* Object */prg) | update progress information - use progress, maximum and indeterminate properties in the object, just as in the attributes | |
Extension Points
|
||
onChange() | Callback for when progress changes |
Accessibility
The progress bar is made accessible by providing a solid border around the visual progress indicator. This border is visible in high contrast mode as well as when images are turned off.
The internalProgress div is assigned the ARIA role of progressbar The valuenow attribute is updated as the progress is updated. No valuemin and valuemax values are provided since the valuenow attribute may be a string provided by the Web developer.
Note: The hot key for the Window-Eyes screen reader to speak progress bar information is ctrl-ins-b. JAWS provides the hot key ins-tab for announcing progress bar name and status.JAWS also has a setting to select the frequency of progress bar announcements. Go to the Configuration Manager, Select Set Options, then User Options and select the desired announcement frequency.
Changes to accessibility for version 1.0 of the ProgressBar
The ARIA valuenow property is set to the ProgressBar's progress value. The valuemin and valuemax properties are set to 0 and the ProgressBar's maximum, respectively.
- Printer-friendly version
- Login or register to post comments
- Subscribe post