📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

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.

Basics

Using the activity indicator requires the ActivityIndicator module.

const ActivityIndicator = require("tns-core-modules/ui/activity-indicator").ActivityIndicator;
import { ActivityIndicator } from "tns-core-modules/ui/activity-indicator";

You can work with its busy property and set it to true or false, thus displaying or hiding the control.

Setting an activity indicator’s busy boolean property via binding:

<ActivityIndicator busy="{{ isLoading }}" />
const vm = new Observable();
vm.set("isLoading", true);
page.bindingContext = vm;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { View } from "tns-core-modules/ui/core/view";

export function onNavigatingTo(args: EventData) {
    const view = args.object as View;
    const vm = new Observable();

    vm.set("isLoading", true);
    view.bindingContext = vm;
}

Improve this document

Demo Source


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


Styling

The ActivityIndicator default color can be set using the color property.

<ActivityIndicator id="myIndicator"
                    busy="{{ isLoading }}"
                    backgroundColor="lightgray"
                    borderRadius="50"
                    color="blue" 
                    width="100" 
                    height="100"/>               

While on Android we can use width and height to set our Indicator's size on iOS we need access to the native API. Changing the default indicator size on iOS.

if (isIOS) {
    const indicator = page.getViewById("myIndicator");
    // accessing the native iOS API https://developer.apple.com/documentation/uikit/uiactivityindicatorviewstyle
    indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.White;
}
if (isIOS) {
    const indicator = page.getViewById("myIndicator");
    // accessing the native iOS API https://developer.apple.com/documentation/uikit/uiactivityindicatorviewstyle
    indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.White;
}

Improve this document

Demo Source


API Reference for ActivityIndicator Class

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = true) UIActivityIndicatorView