# Titanium.UI.ProgressBar

> A progress bar.

- Source: https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.UI.ProgressBar
- Titanium SDK version: 13.0.1
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK 0.8
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

| Android | iOS |
| ------- | --- |
| ![Android](./progressbar_android.png) | ![iOS](./progressbar_ios.png) |

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](https://titaniumsdk.com/docs/sdk/Titanium.UI.ActivityIndicator.md).

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

Use the [Titanium.UI.createProgressBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createProgressBar) method or **`<ProgressBar>`** Alloy element to create a progress bar.

#### Android Platform Notes

In SDK 3.0, use [Titanium.UI.Android.ProgressIndicator](https://titaniumsdk.com/docs/sdk/Titanium.UI.Android.ProgressIndicator.md) 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 [titleControl](https://titaniumsdk.com/docs/sdk/Titanium.UI.Window.md#titleControl) property.
Make sure the window is modal and not full screen, and that the navigation bar is not hidden.

## Example: 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.

``` js
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();
```

## Example: Alloy XML Markup

Previous example as an Alloy view.

index.xml:
``` xml
<Alloy>
    <Window id="win" backgroundColor="white" onClick="incPB">
        <ProgressBar id="pb" />
    </Window>
</Alloy>
```

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

index.tss:
``` js
"#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

- Type: Boolean
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK 10.0.1
- Default: `true`

Enables smooth progress change animation when changing the value.

### color

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS

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](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

### font

- Type: Font
- Platforms: iPhone, iPad, macOS

Font for the progress bar text.

### max

- Type: Number
- Platforms: Android, iPhone, iPad, macOS

Maximum value of the progress bar.

### message

- Type: String
- Platforms: Android, iPhone, iPad, macOS

Progress bar text.

### min

- Type: Number
- Platforms: Android, iPhone, iPad, macOS

Minimum value of the progress bar.

### style

- Type: Number
- Platforms: iPhone, iPad, macOS

Style of the progress bar.

For iOS, progress bar styles are constants defined in [ProgressBarStyle](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.ProgressBarStyle.md).

### tintColor

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK iPhone 3.1.3, iPad 3.1.3, Android 8.0.0

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

### trackTintColor

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK iPhone 5.2.0, iPad 5.2.0, Android 8.0.0

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

### value

- Type: Number
- Platforms: Android, iPhone, iPad, macOS

Current value of the progress bar.

## Inherited members

99 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.0.1/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `click`, `clipMode`, `convertPointToView`, `dblclick`, `doubletap`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longclick`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `singletap`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `swipe`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `touchcancel`, `touchend`, `touchmove`, `touchstart`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `twofingertap`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.