@nativescript-community/ui-material-activityindicator

Material Design Activity Indicator expresses an unspecified wait time.

Usage no npm install needed!

<script type="module">
  import nativescriptCommunityUiMaterialActivityindicator from 'https://cdn.skypack.dev/@nativescript-community/ui-material-activityindicator';
</script>

README

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

mdactivityindicator {
    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