Progress

The progress component shows that an operation is in progress.

Note
This component is supported since Tizen 2.4.
deprecated Progress and ProgressBar component has been merged and renamed to new Progress.

Table of Contents

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

Default Selectors

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

HTML Examples

bar type

<div class="ui-progress" data-type="bar"></div>

activitybar type

<div class="ui-progress" data-type="activitybar"></div>

circle type

<div class="ui-progress" data-type="circle"></div>

activitycircle type

<div class="ui-progress" data-type="activitycircle"></div>

Manual Constructor

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

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

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-type "bar" | "circle" |
"activitybar" | "activitycircle"		 "progressbar" Sets type of progress component.
data-size "small" | "medium" |
"large" | "full"		 "medium" Sets size of progress component.
(It used only with "circle" and "activitycircle" type)
data-value Number 100 Sets default value of progress component.
data-max Number 100 Sets default max value of progress component.
data-min Number 0 Sets default min value of progress component.

Methods

To call a method on the component, please refer the following example:

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

   /*
      progress.methodName(argument1, argument2, ...);
      For example:
   */
   progress.refresh();
</script>

Summary

Method Description 
value()

Sets or gets value of Progress component.

 
option()

Sets or gets options of Progress component.

 
refresh()

Refreshes the Progress DOM.
value

Sets or gets value of Progress component.

value(Number value)

When this method has no parameter, it returns Progress value.
If you call value with new number, you don't need to call refresh() method because it calls automatically.

Return value:

Type Description
Number Returns value of Progress.

Code example:

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

   /* Get the origin value of progress */
   originValue = progress.value();
   console.log(originValue);

   /* Set the value of progress to 70 */
   progress.value(70);
</script>
option

Sets or gets options of Progress component.

option()

When changing value option of progress, we recommend to use value() method.

Code example:

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

   progress.option("value", 50);
   /* After change option, call refresh method */
   progress.refresh();

   /* Get type option value */
   type = progress.option("type");
   console.log(type);
</script>
refresh

Refresh Progress DOM.

refresh()

Code example:

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

   /* Change DOM dynamically or change option */
   progress.refresh();
</script>