Progress Bar

The progress bar component shows a control that indicates the progress percentage of an on-going operation.

Note
Since 2.4, Progress Bar component has been a type of Progress component. To get more information about this component, see Progress component.
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.

Table of Contents

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

Default Selectors

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

Manual Constructor

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

<div id="progress-bar"></div>
<script>
   var element = document.getElementById("progress-bar"),
       progressBar = tau.widget.ProgressBar(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-bar"></div>
<script>
   $("#progress-bar").progressbar();
</script>

The jQuery constructor takes one optional parameter, which is an object defining the configuration options for the component.

HTML Examples

To create a simple progress bar:

<div id="progress-bar" data-role="progressbar"></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-max number 100 Maximum value of the progress bar.
data-min number 0 Minimum value of the progress bar.
data-value number 0 Current progress value.

Events

The following table lists the events related to the progress bar component.

Event Description
change

Triggered when the value of component changes.

complete

Triggered when the value of component reaches the maximum value.

Methods

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

  • TAU API (RECOMMENDED):

    <script>
       var element = document.getElementById("progress-bar"),
           progressBar = tau.widget.ProgressBar(element);
    
       progressBar.methodName(argument1, argument2, ...);
    </script>
    
  • jQuery API (support for backward compatibility):

    $(".selector").progressbar("methodName", argument1, argument2, ...);
    

Summary

Method Description
ProgressBar refresh (  ) 

Refreshes a progress bar.

number value ( number? value ) 

Gets or sets a value.

refresh

Refreshes a progress bar.

ProgressBar refresh ( ) 

The method rebuilds the DOM structure of the progress bar 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
ProgressBar Returns this.

Code example (TAU API RECOMMENDED):

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

   progressBarWidget.refresh();
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress-bar"></div>
<script>
   $("#progress-bar").progressbar();
   $("#progress-bar").progressbar("refresh");
</script>
value

Gets or sets a value.

number value ( number? value) 

Since: 2.3

Returns the progress bar value or sets the value.

Parameters:

Parameter Type Required/optional Default value Description
value number Optional New progress bar value.

Return value:

Type Description
number In the get mode, returns the current progress value.

Code example (TAU API RECOMMENDED):

<div id="progress-bar"></div>
<script>
   var element = document.getElementById("progress-bar"),
       progressBarWidget = tau.widget.ProgressBar(element),
       // Returns current value
       value = progressBarWidget.value();

   progressBarWidget.value(30); // Sets new value to 30
</script>

Code example (jQuery API support for backward compatibility):

<div id="progress-bar"></div>
<script>
   $("#progress-bar").progressbar();
   // Returns current value
   $("#progress-bar").progressbar("value");

   // Sets new value to 30
   $("#progress-bar").progressbar("value", 30);
</script>