Progress Indicator

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.

The state of a progress bar can be one of NORMAL=0, PAUSED=1 or ERROR=2 using the setState(state) function. These constants have been added to the bb.progress object for convenience.

    bb.progress.NORMAL
    bb.progress.PAUSED
    bb.progress.ERROR

By default the progress indicator is in the NORMAL state. When you set the progress indicator state to PAUSED, it will draw the indicator in a yellow color. If you set the state of the progress indicator to ERROR, it will be drawn with a red color.

    document.getElementById('myIndicator').setState(bb.progress.PAUSED);