🤖 Create a chatbot for your NativeScript app! Learn more at our upcoming webinar.

NativeScript Angular

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.

Image

Creating Progress

HTML

<Progress [value]="progressValue" 
          (valueChanged)="onValueChanged($event)" 
          maxValue="100" class="m-20">
</Progress>

Typescript

import { Component, OnInit } from "@angular/core";
import { Progress } from "tns-core-modules/ui/progress";

@Component({
    moduleId: module.id,
    templateUrl: "./creating-progress.component.html",
})
export class CreatingProgressComponent implements OnInit {
    public progressValue: number;

    ngOnInit() {
        this.progressValue = 25;

        setInterval(() => {
            this.progressValue += 1;
        }, 300);
    }

    onValueChanged(args) {
        let progressBar = <Progress>args.object;

        console.log("Value changed for " + progressBar);
        console.log("New value: " + progressBar.value);
    }
}

Improve this document

Demo Source


Setting Progress

HTML

<Progress (loaded)="onProgressBarLoaded($event)" 
          (valueChange)="onValueChanged($event)" 
          color="#8C489F" backgroundColor="#FFFF66" class="m-20">
</Progress>

Typescript

import { Component } from "@angular/core";
import { Progress } from "tns-core-modules/ui/progress";

@Component({
    moduleId: module.id,
    templateUrl: "./setting-progress.component.html",
})
export class SettingProgressComponent  {

    onProgressBarLoaded(args) {
        let myProgressBar = <Progress>args.object;

        myProgressBar.value = 10;
        myProgressBar.maxValue = 200;

        setInterval(function() {
            myProgressBar.value += 2;
        }, 300);
    }

    onValueChanged(args) {
        let myProgressBar = <Progress>args.object;

        console.log("Old Value: " + args.oldValue);
        console.log("New Value: " + args.value);
    }
}

Improve this document

Demo Source


Style Progress

The example shows how to style progress component.

<Progress [value]="progressValue" 
          (valueChanged)="onValueChanged($event)" 
          maxValue="100" class="m-20">
</Progress>
Progress{
    color: cyan;
    background-color: green;

}

Improve this document

Demo Source


API Reference for Progress Class

Native Component

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