Progress Indicator

NOTE: Progress Indicators are currently only available in the "next" branch

Progress Indicators are quite easy to use in bbUI. Simply add an HTML5 <progress> element and you are good to go

<progress max="100" value="10"></progress>

The control will be displayed according to the UI specifications found on the target BlackBerry operating system. When styling is applied it will stretch the slider to 100% of the width of its containing element/div. The highlight color of the slider will use the bb10HighlightColor provided in the toolkit init() function for BlackBerry 10 and will use a standard green color for other BlackBerry operating systems.

You can use the max and value attributes to set the initial state of your indicator.

JavaScript Interface

To move the progress indicator there has been a setValue(int) function added to the <progress> element. This allows the value to be set and also apply the visual styling

function setMyValue() {
   var value = 10;
   document.getElementById('myprogress').setValue(value);
}

When you set the value of the progress indicator it is best to do it with a setTimeout so that the UI thread gets a chance to paint.

You can also move your progress bar to a "paused" state by using the pause() function added to the <progress> element. This gives a different visual cue compared to the progress continuing.

function pauseMyIndicator() {
   document.getElementById('myprogress').pause();
}