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

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

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;

}

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

Properties

API References

Native Component