@nativescript-community/ui-material-activityindicator
Material Design Activity Indicator expresses an unspecified wait time.
npm i --save @nativescript-community/ui-material-activityindicator

NativeScript Material Circular progress indicator

Material Design's Circular progress indicator component for NativeScript.

npm npm

Contents

  1. Installation
  2. Changelog
  3. FAQ
  4. Usage
  5. API

Installation

For NativeScript 7.0+

  • tns plugin add @nativescript-community/ui-material-activityindicator

For NativeScript 6.x

  • tns plugin add nativescript-material-activityindicator

If using tns-core-modules

  • tns plugin add nativescript-material-activityindicator@2.5.4

Be sure to run a new build after adding plugins to avoid any issues.

Changelog

FAQ

Usage

Plain NativeScript

IMPORTANT: Make sure you include xmlns:mda="@nativescript-community/ui-material-activityindicator" on the Page element.

XML

<Page xmlns:mda="@nativescript-community/ui-material-activityindicator">
<StackLayout horizontalAlignment="center">
<mda:ActivityIndicator busy="true"/>
</StackLayout>
</Page>

CSS

mdcactivityindicator {
color: #fff;
}

NativeScript + Angular

import { NativeScriptMaterialActivityIndicatorModule } from "@nativescript-community/ui-material-activityindicator/angular";

@NgModule({
imports: [
NativeScriptMaterialActivityIndicatorModule,
...
],
...
})
<MDActivityIndicator busy="true"></MDActivityIndicator>

NativeScript + Vue

import Vue from 'nativescript-vue';
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue';

Vue.use(ActivityIndicatorPlugin);
<MDActivityIndicator busy="true"/>

API

Attributes

Inherite from NativeScript Activity Indicator so it already has all the same attributes