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.


Using the activity indicator requires the ActivityIndicator module.

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

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;

Improve this document

Demo Source

Code Behind

Dynamic code-behind creation of ActivityIndicator and showing the indicator while image is loading.

const image = new Image();
image.isLoading = true; // mock image downloading in progress

const indicator = new ActivityIndicator();
// Bind the busy property of the indicator to the isLoading property of the image
    sourceProperty: "isLoading",
    targetProperty: "busy"
}, image);


Improve this document

Demo Source


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

<ActivityIndicator id="myIndicator"
                    busy="{{ isLoading }}"

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
    indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.UIActivityIndicatorViewStyleWhiteLarge;

Improve this document

Demo Source

API Reference for ActivityIndicator Class

Native Component

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