Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama


dojox/mobile/ProgressIndicator is a round spinning graphical representation which indicates that the current task is on-going.


The spinning object is NOT an animated gif, but a collection of div elements. Non-CSS3 browsers do not have ability to rotate dom nodes. In that case, the indicator becomes a rectangle shape, not a round shape.


ProgressIndicator is a widget, and you can create a new instance with the ‘new’ operator. It can be used as a singleton as well. A singleton instance can be obtained by calling dojox/mobile/ProgressIndicator.getInstance().

The start() method of ProgressIndicator starts the spinning, and the stop() method stops the spinning. You need to explicitly add ProgressIndicator.domNode to the DOM. The stop() method automatically removes ProgressIndicator.domNode from the DOM tree for you.

Constructor Parameters

Parameter Type Default Description
interval Number 100 The time interval in milliseconds for updating the spinning indicator.
size Number 40 The size of the indicator in pixels.
removeOnStop Boolean true If true, this widget is removed from the parent node when stop() is called.
startSpinning Boolean false If true, call start() to run the indicator at startup.
center Boolean true If true, the indicator is displayed as center aligned.
colors Array null An array of indicator colors. 12 colors have to be given. If colors are not specified, css styles (mblProg0Color - mblProg11Color) are used.

Method Detail


Starts the ProgressIndicator spinning.


Stops the ProgressIndicator spinning.

setImage(/*String*/ file)

Set an indicator icon image file (typically animated GIF). If null is specified, restores the default spinner.

file - a path for an indicator icon image file


Singleton example

In this example, get the progress indicator instance using getInstance(), add it to the current dom tree, and call the start() method to start spinning the progress indicator. In the load() handler of dojo/xhr, call the stop() method to stop spinning and remove it from the dom tree.

], function(xhr, parser, ProgressIndicator){
  function loadPage(){
    var container; // dom node
    var prog = ProgressIndicator.getInstance();
    prog.start(); // start the progress indicator

      url: url,
      handleAs: "text",
      load: function(response, ioArgs){
        prog.stop(); // stop the progress indicator
        container.innerHTML = response;

Declarative example

Default indicator .. html

<div data-dojo-type="dojox/mobile/ProgressIndicator" startSpinning="true"></div>

Large indicator .. html

<div data-dojo-type="dojox/mobile/ProgressIndicator" startSpinning="true"

Color indicator .. html

<div data-dojo-type="dojox/mobile/ProgressIndicator" startSpinning="true"

Programmatic example

], function(win, ProgressIndicator){
  var prog = new ProgressIndicator({size:40, center:false});
Error in the documentation? Can’t find what you are looking for? Let us know!