The ActivityIndicator
represents a UI widget which
displays a progress indicator hinting the user for some
background operation running like loading image, data, accepting
a request, etc. We can control its behavior by setting or
binding to its boolean property busy
.
You can work with its boolean busy
property and set
it to true
or false
, thus displaying
or hiding the control.
<ActivityIndicator busy="{{ isBusy }}" loaded="indicatorLoaded"/>
const Observable = require("tns-core-modules/data/observable").Observable;
function onNavigatingTo(args) {
const page = args.object;
const vm = new Observable();
vm.set("isBusy", true);
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
function indicatorLoaded(args) {
const activityIndicator = args.object;
activityIndicator.on("busyChange", (aiargs) => {
const indicator = aiargs.object;
console.log(`indicator.busy changed to: ${indicator.busy}`);
});
}
exports.indicatorLoaded = indicatorLoaded;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ActivityIndicator } from "tns-core-modules/ui/activity-indicator";
export function onNavigatingTo(args: EventData) {
const view = args.object as Page;
const vm = new Observable();
vm.set("isBusy", true);
view.bindingContext = vm;
}
export function indicatorLoaded(args: EventData) {
let activityIndicator = args.object as ActivityIndicator;
activityIndicator.on("busyChange", (aiargs: EventData) => {
let indicator = aiargs.object as ActivityIndicator;
console.log("indicator.busy changed to: " + indicator.busy);
});
}
The ActivityIndicator
supports styling the
color
(default value is blue
) and
backgroundColor
(default value is
transparent
) properties.
<ActivityIndicator busy="true" color="red" width="100" height="100"/>
nativescript-theme-core CSS class
|
Description |
activity-indicator |
Styles the color of the indicator in sync
with the main theme color.
|
<ActivityIndicator loaded="onLoaded" busy="true" backgroundColor="red" width="100" height="100"/>
const isIOS = require("tns-core-modules/platform").isIOS;
function onLoaded(args) {
const view = args.object;
if (isIOS) {
// accessing the native iOS API https://developer.apple.com/documentation/uikit/uiactivityindicatorviewstyle
view.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.White;
}
}
exports.onLoaded = onLoaded;
import { isIOS } from "tns-core-modules/platform";
import {ActivityIndicator} from "tns-core-modules/ui/activity-indicator";
export function onLoaded(args) {
const view = args.object as ActivityIndicator;
if (isIOS) {
// accessing the native iOS API https://developer.apple.com/documentation/uikit/uiactivityindicatorviewstyle
view.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.White;
}
}
Dynamic code-behind creation of
ActivityIndicator
and showing the indicator while
image is loading.
const myloadingObject = { isLoading: true };
const indicator = new ActivityIndicator();
// Bind the busy property of the indicator to the isLoading property of the image
indicator.bind({
sourceProperty: "isLoading",
targetProperty: "busy"
}, myloadingObject);
console.log(indicator.busy); // busy is a writable property
myStack.addChild(indicator);
const myloadingObject = { isLoading: true };
const indicator = new ActivityIndicator();
// Bind the busy property of the indicator to the isLoading property of the image
indicator.bind({
sourceProperty: "isLoading",
targetProperty: "busy"
}, myloadingObject);
console.log(indicator.busy); // busy is a writable property
myStack.addChild(indicator);
Name |
Type |
Description |
busy |
boolean |
Gets or sets a value indicating whether the widget is
currently displaying progress.
|
Name |
Description |
busyChange |
Emitted when the ActivityIndicator busy property is
changed.
|
loaded |
Emitted when the view is loaded. |
unloaded |
Emitted when the view is unloaded. |
layoutChanged |
Emitted when the layout bounds of a view changes due to
layout processing.
|