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 widget "circleprogress" with <progress> element, you can show default progress style.
To add a CircleProgressBar widget 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();
          // sets the value for the progress
          progressbarWidget.value("15");
        });
    </script>

Where to Go Next

• UI Component Reference