Activity Indicator

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.

Usage

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

Improve this document

Demo Source

Styling

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"/>               

Improve this document

Demo Source

Tips And Tricks

Change UIActivityIndicatorViewStyle for iOS

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

}

Creating ActivityIndicator via Code-Behind

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

Improve this document

Demo Source

Properties

Events

API References

Native Component