Titanium Mobile

# Titanium.UI.ProgressBar

A progress bar.

Availability
0.8
0.8
9.2.0
Extends
Titanium.UI.View

# Overview

Android iOS Windows
Android iOS Windows

A progress bar is used for displaying an ongoing activity with a defined progression. For an activity without a defined progression, you can use Titanium.UI.ActivityIndicator.

Unlike most views, progress bars are hidden by default, so you must explicitly show the progress bar.

Use the Titanium.UI.createProgressBar method or <ProgressBar> Alloy element to create a progress bar.

# Android Platform Notes

In SDK 3.0, use Titanium.UI.Android.ProgressIndicator to display a progress indicator in a modal dialog or window title bar. Use ProgressBar to display the progress bar inside another view.

# iOS Platform Notes

On iOS, to display the progress bar in the window title bar, assign the progress bar object to the window's Titanium.UI.Window.titleControl property. Make sure the window is modal and not full screen, and that the navigation bar is not hidden.

# Examples

# Simple Progress Bar

In this example we create a progress bar with the min value of 0 and the max value of 10 and the current value of 0. Changing the value property causes the displayed progress bar to update.

var pb = Ti.UI.createProgressBar({
    top: 25,
    width: 250,
    min: 0,
    max: 10,
    value: 0,
    color: 'blue',
    message: 'Downloading 0 of 10',
    font: {fontSize: 14, fontWeight: 'bold'},
    style: Ti.UI.iOS.ProgressBarStyle.PLAIN,
});
var win = Ti.UI.createWindow({backgroundColor: 'white'});
win.addEventListener('click', function(){
    if (pb.value < pb.max) {
        pb.message = 'Downloading '+ ++pb.value + ' of 10';
    }
});
win.add(pb);
win.open();

# Alloy XML Markup

Previous example as an Alloy view.

index.xml:

<Alloy>
    <Window id="win" backgroundColor="white" onClick="incPB">
        <ProgressBar id="pb" />
    </Window>
</Alloy>

index.js:

function incPB() {
    if ($.pb.value < $.pb.max) {
        $.pb.message = 'Downloading '+ ++$.pb.value + ' of 10';
    }
}
$.win.open();

index.tss:

"#pb": {
    top: 25,
    width: 250,
    min: 0,
    max: 10,
    value: 0,
    color: 'blue',
    message: 'Downloading 0 of 10',
    font: {fontSize:14, fontWeight:'bold'},
    style: Titanium.UI.iOS.ProgressBarStyle.PLAIN
}

# Properties

# animated

Availability
10.0.1
10.0.1
10.0.1
animated :Boolean

Enables smooth progress change animation when changing the value.

Default: true

# color

Availability
0.8
0.8
9.2.0
color :String | Titanium.UI.Color

Color of the progress bar message, as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

# font

Availability
0.8
9.2.0
font :Font

Font for the progress bar text.

# max

Availability
0.8
0.8
9.2.0
max :Number

Maximum value of the progress bar.

# message

Availability
0.8
0.8
9.2.0
message :String

Progress bar text.

# min

Availability
0.8
0.8
9.2.0
min :Number

Minimum value of the progress bar.

# style

Availability
0.8
9.2.0
style :Number

Style of the progress bar.

For iOS, progress bar styles are constants defined in Titanium.UI.iOS.ProgressBarStyle.

# tintColor

Availability
3.1.3
9.2.0
tintColor :String | Titanium.UI.Color

The color shown for the portion of the progress bar that is filled.

This property is a direct correspondant of the tintColor property of UIView on iOS. If no value is specified, the tintColor of the View is inherited from its superview.

Default: null

# trackTintColor

Availability
8.0.0
5.2.0
9.2.0
trackTintColor :String | Titanium.UI.Color

The color shown for the portion of the progress bar that is not filled.

# value

Availability
0.8
0.8
9.2.0
value :Number

Current value of the progress bar.

Contents