NOTE! You are browsing legacy documentation. For latest visit

NativeScript Angular


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.



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

    templateUrl: "./styling.component.html",
    styleUrls: ["./styling.component.css"]
export class StylingComponent implements OnInit {
    public progressValue: number;

    ngOnInit() {
        this.progressValue = 25;


    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>
    color: cyan;
    background-color: green;


Tips And Tricks

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

    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);


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