Progress

The progress component shows that an operation is in progress.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Methods

Default Selectors

By default, all elements with the data-role="progress" attribute are displayed as progress components.

Manual Constructor

To manually create a button component, use the component constructor from the tau namespace:

<div id="progress"></div>
<script>
   var element = document.getElementById("progress"),
       progress = tau.widget.Progress(element);
</script>

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

If the jQuery library is loaded, you can use its method:

<div id="progress"></div>
<script>
   $("#progress").progress();
</script>

HTML Examples

To create a simple progress component:

<div id="progress" data-role="progress"></div>

Options

The options for a component can be defined as data-... attributes or passed as parameters to the constructor.

You can change an option for the component using the option method.

Option Input type Default value Description
data-running boolean true Sets whether the progress component is running.
data-style "circle" | "pending" "pending"

Object with the default options.

Methods

To call a method on the component, use one of the existing APIs:

Summary

Method Description
hide (  ) 

Hides the component.

Progress refresh (  ) 

Refreshes the progress.

running ( boolean flag ) 

Starts or stops running the progress.

show (  ) 

Shows the component.

hide

Hides the component.

hide ( ) 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="progress"></div>
<script>
   var element = document.getElementById("progress"),
       progressWidget = tau.widget.Progress(element);
   progressWidget.hide();
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress"></div>
<script>
   $("#progress").progress();
   $("#progress").progress("hide");
</script>
refresh

Refreshes the progress.

Progress refresh ( ) 

The method rebuilds the DOM structure of the progress component. It must be called after you manually change the HTML attributes of the component's DOM structure.

The method is called automatically after any component option is changed.

Return value:

Type Description
Progress Returns this.

Code example (TAU API RECOMMENDED):

$("#progress").progress();
<div id="progress"></div>
<script>
   var element = document.getElementById("progress"),
       progressWidget = tau.widget.Progress(element);

   progressWidget.refresh();

   // Is also called after
   progressWidget.option("running", true);
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress"></div>
<script>
   $("#progress").progress();
   $("#progress").progress("refresh");
</script>
running

Starts or stops running the progress.

running ( boolean flag) 

Parameters:

Parameter Type Required/optional Default value Description
flag boolean Required If true, the progress component is set to run.

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="progress"></div>
<script>
   var element = document.getElementById("progress"),
       progressWidget = tau.widget.Progress(element),
       // Return current state of running
       value = progressWidget.running();

   progressWidget.running(true); // Starts running

   progressWidget.running(false); // Stops running
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress"></div>
<script>
   $("#progress").progress();

   // Return current state of running
   $("#progress").progress("running");

   // Starts running
   $("#progress").progress("running", true);

   // Stops running
   $("#progress").progress("running", false);
</script>
show

Shows the component.

show ( ) 

Return value:

No return value

Code example (TAU API RECOMMENDED):

<div id="progress"></div>
<script>
   var element = document.getElementById("progress"),
       progressWidget = tau.widget.Progress(element);

   progressWidget.show();
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress"></div>
<script>
   $("#progress").progress();
   $("#progress").progress("show");
</script>