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.
<StackLayout verticalAlign="center" height="100">
<Progress width="100%" value="{{ progressValue }}" maxValue="{{ progressMaxValue }}" loaded="onProgressLoaded" />
</StackLayout>
const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
vm.set("progressValue", 10); // Initial value
vm.set("progressMaxValue", 100); // Maximum value
// Forcing progress value change (for demonstration)
setInterval(() => {
const value = vm.get("progressValue");
vm.set("progressValue", value + 2);
}, 300);
page.bindingContext = vm;
}
function onProgressLoaded(args) {
const myProgressBar = args.object;
myProgressBar.on("valueChange", (pargs) => {
// TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
console.log(`Old Value: ${pargs.oldValue}`);
console.log(`New Value: ${pargs.value}`);
});
}
exports.onProgressLoaded = onProgressLoaded;
exports.onNavigatingTo = onNavigatingTo;
import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Progress } from "tns-core-modules/ui/progress";
export function onNavigatingTo(args) {
const page: Page = <Page>args.object;
const vm = new Observable();
vm.set("progressValue", 10); // Initial value
vm.set("progressMaxValue", 100); // Maximum value
// Forcing progress value change (for demonstration)
setInterval(() => {
const value = vm.get("progressValue");
vm.set("progressValue", value + 2);
}, 300);
page.bindingContext = vm;
}
export function onProgressLoaded(args) {
const myProgressBar: Progress = <Progress>args.object;
myProgressBar.on("valueChange", (pargs: PropertyChangeData) => {
// TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
console.log(`Old Value: ${pargs.oldValue}`);
console.log(`New Value: ${pargs.value}`);
});
}
<StackLayout verticalAlign="center" height="100">
<Progress width="100%" value="{{ progressValue }}" maxValue="{{ progressMaxValue }}" loaded="onProgressLoaded" />
</StackLayout>
const observableModule = require("tns-core-modules/data/observable");
function onNavigatingTo(args) {
const page = args.object;
const vm = new observableModule.Observable();
vm.set("progressValue", 10); // Initial value
vm.set("progressMaxValue", 100); // Maximum value
// Forcing progress value change (for demonstration)
setInterval(() => {
const value = vm.get("progressValue");
vm.set("progressValue", value + 2);
}, 300);
page.bindingContext = vm;
}
function onProgressLoaded(args) {
const myProgressBar = args.object;
myProgressBar.on("valueChange", (pargs) => {
// TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
console.log(`Old Value: ${pargs.oldValue}`);
console.log(`New Value: ${pargs.value}`);
});
}
exports.onProgressLoaded = onProgressLoaded;
exports.onNavigatingTo = onNavigatingTo;
import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Progress } from "tns-core-modules/ui/progress";
export function onNavigatingTo(args) {
const page: Page = <Page>args.object;
const vm = new Observable();
vm.set("progressValue", 10); // Initial value
vm.set("progressMaxValue", 100); // Maximum value
// Forcing progress value change (for demonstration)
setInterval(() => {
const value = vm.get("progressValue");
vm.set("progressValue", value + 2);
}, 300);
page.bindingContext = vm;
}
export function onProgressLoaded(args) {
const myProgressBar: Progress = <Progress>args.object;
myProgressBar.on("valueChange", (pargs: PropertyChangeData) => {
// TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters
console.log(`Old Value: ${pargs.oldValue}`);
console.log(`New Value: ${pargs.value}`);
});
}
<!--
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" row="0"/>
<!-- Using the nativescript-theme-core CSS class to change the Progress style -->
<Progress value="25" maxValue="100" class="progress" row="1"/>
Progress{
color: cyan;
background-color: green;
}
Name |
Type |
Description |
value |
number |
Gets or sets a progress current value. |
maxValue |
number |
Gets or sets a progress max value. |