Question

Extends Widget

A widget representing a numeric value as a horizontal bar with a growing indicator.

Import this type with “const {ProgressBar} = require('tabris');”

Android	iOS

Properties

maximum

Type: number, default: 100

The value that represents a progress of 100%.

minimum

Type: number, default: 0

The value that represents a progress of 0%.

selection

Type: number, default: 0

The actual progress to be displayed.

state

AndroidWindows 10

Type: string, supported values: normal, paused, error, default: normal

This property affects the color of the progress indicator. Not supported on iOS.

tintColor

Type: Color

The color used to display the current progress.

Events

maximumChanged

Fired when the maximum property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: number The new value of maximum.

minimumChanged

Fired when the minimum property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: number The new value of minimum.

selectionChanged

Fired when the selection property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: number The new value of selection.

stateChanged

Fired when the state property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of state.

tintColorChanged

Fired when the tintColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of tintColor.

Example

const {ProgressBar, ui} = require('tabris');

// A progress bar that is animated using a timer

let progressBar = new ProgressBar({
  left: 15, right: 15, centerY: 0,
  maximum: 300,
  selection: 100
}).appendTo(ui.contentView);

setInterval(() => {
  let selection = progressBar.selection + 1;
  progressBar.selection = selection > 300 ? 0 : selection;
}, 20);

See also

• Simple ProgressBar snippet