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 have 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 is 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, see 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 the value of the Progress component.

 
option (  )

Sets or gets the options of the Progress component.

 
refresh (  )

Refreshes the Progress DOM.
value

Sets or gets the value of the Progress component.

value ( Number value )

When this method has no parameter, it returns the Progress value.
If you call value with a new number, you don't need to call the 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;

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

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

Sets or gets the options of the Progress component.

option ( )

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

Code example:

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

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

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

Refreshes the 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>