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

Usage

<Progress value="25" maxValue="100" (valueChanged)="onValueChanged($event)"></Progress>
import { Component, OnInit } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "./styling.component.html",
    styleUrls: ["./styling.component.css"]
})
export class StylingComponent implements OnInit {
    public progressValue: number;

    ngOnInit() {
        this.progressValue = 25;
    }
}

Improve this document

Demo Source


Styling

<!-- 
    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"></Progress>
<!-- Using the @nativescript/theme CSS class to change the Progress style -->
<Progress value="25" maxValue="100" class="progress"></Progress>
Progress{
    color: cyan;
    background-color: green;

}

Improve this document

Demo Source


Tips And Tricks

<Progress (loaded)="onProgressBarLoaded($event)" 
          (valueChange)="onValueChanged($event)" 
          class="progress">
</Progress>
import { Component } from "@angular/core";
import { Progress } from "tns-core-modules/ui/progress";

@Component({
    moduleId: module.id,
    templateUrl: "./tips-and-tricks.component.html",
})
export class TipsAndTricksComponent  {
    onProgressBarLoaded(args) {
        let myProgressBar = args.object as Progress;

        myProgressBar.value = 10; // Initial value
        myProgressBar.maxValue = 100; // Maximum value

        // Forcing progress value change (for demonstration)
        setInterval(() => {
            myProgressBar.value += 2;
        }, 1000);
    }

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

        // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
        console.log("Old Value: " + args.oldValue);
        console.log("New Value: " + args.value);
    }
}

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