NativeScript Material Circular progress indicator
Material Design's Circular progress indicator component for NativeScript.Contents
- [Plain NativeScript](#plain-nativescript)
- [Angular](#nativescript--angular)
- [Vue](#nativescript--vue)
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 includexmlns: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"/>