NativeScript Core

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.

const progressModule = require("tns-core-modules/ui/progress");

Basics

The example shows how to create basic progress component as well as, how to change its value property via code-behind.

<StackLayout verticalAlign="center" row="0" height="100">
    <Progress width="100%" value="{{ progressValue }}"  maxValue="{{ progressMaxValue }}" loaded="onProgressLoaded" class="p-20"/>
</StackLayout>
function onNavigatingTo(args) {
    const page = args.object;
    // set up the initial values for the progress components
    const vm = new observableModule.Observable();
    vm.set("progressValue", 10);
    vm.set("progressMaxValue", 100);
    setInterval(() => {
        const value = vm.get("progressValue");
        vm.set("progressValue", value + 2);
    }, 300);
    page.bindingContext = vm;
}
// handle value change
function onProgressLoaded(args) {
    const sliderComponent = args.object;
    sliderComponent.on("valueChange", (pargs) => {
        console.log(`Old Value: ${pargs.oldValue}`);
        console.log(`New Value: ${pargs.value}`);
    });
}

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

Improve this document

Demo Source


Code Behind

In the following example is shown, how to create Progress via Code-behind

<StackLayout id="stackLayoutId">
        <Label text="{{ 'Result: ' + prResult}}" textWrap="true" />

</StackLayout>
function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("prResult", 0);
    // creating new Switch and binding the value property
    const progress = new progressModule.Progress();
    progress.value = 0;
    setInterval(() => {
        progress.value += 2;
    }, 300);

    progress.on("valueChange", (args) => {
        vm.set("prResult", args.object.value);
    });

    stackLayout.addChild(progress);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;

Improve this document

Demo Source


API Reference for Progress Class

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = false) UIProgressView