Widget “ProgressBar”

Extends Widget

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

You can import this type like this:

import {ProgressBar} from 'tabris';

Or reference it directly form anywhere as “tabris.ProgressBar”. Android | iOS — | — ProgressBar on Android | ProgressBar on 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

< span class = 'android-tag' title = 'supported on Android' > Android < /span>

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

import {ProgressBar, ui} from '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