Progress

The Progress widget is a visual bar indicator of a progress in a operation. It shows a bar representing the current progress of the operation.

Usage

XML
JavaScript
TypeScript

<StackLayout verticalAlign="center" height="100">
    <Progress width="100%" value="{{ progressValue }}"  maxValue="{{ progressMaxValue }}" loaded="onProgressLoaded" />
</StackLayout>

const observableModule = require("tns-core-modules/data/observable");

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("progressValue", 10); // Initial value
    vm.set("progressMaxValue", 100); // Maximum value
    // Forcing progress value change (for demonstration)
    setInterval(() => {
        const value = vm.get("progressValue");
        vm.set("progressValue", value + 2);
    }, 300);
    page.bindingContext = vm;
}
function onProgressLoaded(args) {
    const myProgressBar = args.object;
    myProgressBar.on("valueChange", (pargs) => {
        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
        console.log(`Old Value: ${pargs.oldValue}`);
        console.log(`New Value: ${pargs.value}`);
    });
}

exports.onProgressLoaded = onProgressLoaded;
exports.onNavigatingTo = onNavigatingTo;

import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Progress } from "tns-core-modules/ui/progress";

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("progressValue", 10); // Initial value
    vm.set("progressMaxValue", 100); // Maximum value
    // Forcing progress value change (for demonstration)
    setInterval(() => {
        const value = vm.get("progressValue");
        vm.set("progressValue", value + 2);
    }, 300);
    page.bindingContext = vm;
}
export function onProgressLoaded(args) {
    const myProgressBar: Progress = <Progress>args.object;
    myProgressBar.on("valueChange", (pargs: PropertyChangeData) => {
        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
        console.log(`Old Value: ${pargs.oldValue}`);
        console.log(`New Value: ${pargs.value}`);
    });
}

Improve this document

Demo Source

Styling

Improve this document

Demo Source

Tips And Tricks

XML
JavaScript
TypeScript

<StackLayout verticalAlign="center" height="100">
    <Progress width="100%" value="{{ progressValue }}"  maxValue="{{ progressMaxValue }}" loaded="onProgressLoaded" />
</StackLayout>

const observableModule = require("tns-core-modules/data/observable");

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("progressValue", 10); // Initial value
    vm.set("progressMaxValue", 100); // Maximum value
    // Forcing progress value change (for demonstration)
    setInterval(() => {
        const value = vm.get("progressValue");
        vm.set("progressValue", value + 2);
    }, 300);
    page.bindingContext = vm;
}
function onProgressLoaded(args) {
    const myProgressBar = args.object;
    myProgressBar.on("valueChange", (pargs) => {
        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
        console.log(`Old Value: ${pargs.oldValue}`);
        console.log(`New Value: ${pargs.value}`);
    });
}

exports.onProgressLoaded = onProgressLoaded;
exports.onNavigatingTo = onNavigatingTo;

import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Progress } from "tns-core-modules/ui/progress";

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("progressValue", 10); // Initial value
    vm.set("progressMaxValue", 100); // Maximum value
    // Forcing progress value change (for demonstration)
    setInterval(() => {
        const value = vm.get("progressValue");
        vm.set("progressValue", value + 2);
    }, 300);
    page.bindingContext = vm;
}
export function onProgressLoaded(args) {
    const myProgressBar: Progress = <Progress>args.object;
    myProgressBar.on("valueChange", (pargs: PropertyChangeData) => {
        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
        console.log(`Old Value: ${pargs.oldValue}`);
        console.log(`New Value: ${pargs.value}`);
    });
}

Creating Progress component via Code-Behind

<!-- 
    Using backgroundColor (CSS: background-color) & color to change the Progress style 
    Note; backgroundColor will work only on iOS; onAndroid the background will be the color with applied opacity
-->
<Progress value="50" maxValue="100" backgroundColor="red" color="green" row="0"/>
<!-- Using the nativescript-theme-core CSS class to change the Progress style -->
<Progress value="25" maxValue="100" class="progress" row="1"/>

Progress{
    color: cyan;
    background-color: green;

}

Improve this document

Demo Source

Properties

Name	Type	Description
`value`	`number`	Gets or sets a progress current value.
`maxValue`	`number`	Gets or sets a progress max value.

API References

Name	Type
tns-core-modules/ui/progress	`Module`
Progress	`Class`

Native Component

Android	iOS
android.widget.ProgressBar	UIProgressView

NativeScript Core