CircleProgressBar

Shows a control that indicates the progress percentage of an on-going operation by circular shape.

The circle progress component shows a control that indicates the progress percentage of an on-going operation.
This component can be scaled to be fit inside a parent container.

Table of Contents

1. How to Create CircleProgressBar
2. Options
3. Events
4. Methods

How to Create CircleProgressBar

Default CircleProgressBar

If you don't make any "circleprogress" with <progress> element, you can show default progress style.
To add a CircleProgressBar component to the application, use the following code:

<div class="ui-page" id="pageCircleProgressBar">
   <header class="ui-header"></header>
   <div class="ui-content">
      <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
   </div>
</div>
<script>
   (function()
   {
      var page = document.getElementById("pageCircleProgressBar"),
          progressBar = document.getElementById("circleprogress"),
          progressBarWidget;

      page.addEventListener("pageshow", function()
      {
         /* Make Circle Progressbar object */
         progressBarWidget = new tau.widget.CircleProgressBar(progressBar);
      });

      page.addEventListener("pagehide", function()
      {
         /* Release object */
         progressBarWidget.destroy();
      });
   }());
</script>

Full(screen) size CircleProgressBar

To add a circular shape(page size) progressbar in your application, you have to declare <progress> tag in "ui-page" element.
And in your javascript code, you have to add option "size: full".
Be sure to place the <progress> element outside of content element.

<div class="ui-page" id="pageCircleProgressBar">
   <header class="ui-header"></header>
   <div class="ui-content"></div>
   <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
</div>
<script>
   (function()
   {
      var page = document.getElementById("pageCircleProgressBar"),
          progressBar = document.getElementById("circleprogress"),
          progressBarWidget;

      page.addEventListener("pageshow", function()
      {
         /* Make Circle Progressbar object */
         progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "full"});
      });

      page.addEventListener("pagehide", function()
      {
         /* Release object */
         progressBarWidget.destroy();
      });
   }());
</script>

Using event

Circle progress bar triggers "progresschange" event. The description is here.
The following shows how to use "progresschange" event.

progressBar.addEventListener("progresschange", function()
{
   /* Do something when the value of progress changes */
   console.log(progressBarWidget.value());
});

Options

Events

Methods

Summary

string value() 

value

Get or Set value of the widget

string value() 

Since: 2.3

Return element value or set the value

Return value:

Type	Description
string	In get mode return element value

Code example:

<div class="ui-page" id="pageCircleProgressBar">
   <header class="ui-header">
      <h2 class="ui-title">Circle Progress Bar</h2>
   </header>
   <div class="ui-content content-padding">Circle Progress Bar
      <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
   </div>
</div>

<script>
   var page = document.getElementById("pageCircleProgressBar");

   page.addEventListener("pageshow", function()
   {
      var progressbar = document.getElementById("circleprogress"),
          progressbarWidget = tau.widget.CircleProgressBar(progressbar),
          /* Return value in progress tag */
          value = progressbarWidget.value();
      /* Set the value for the progress */
      progressbarWidget.value("15");
   });
</script>