Progress view is a linear progress indicator that implements Material Design animation and layout.
npm i --save @nativescript-community/ui-material-progress

NativeScript Material Linear progress indicator

Material Design's Linear progress indicator component for NativeScript.

npm npm


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


:warning: Warning :warning:

From NativeScript 5.x using this component will break the NativeScript tab component on iOS (which is bound to be removed). This is needed to allow using the latest native iOS features. If needed you can use either bottomnavigationbar (this one is the best choice, closest to material design) or material-tabs (clone of the NativeScript one, but with a little less features).

For NativeScript 7.0+

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

For NativeScript 6.x

  • tns plugin add nativescript-material-progress

If using tns-core-modules

  • tns plugin add nativescript-material-progress@2.5.4

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




Plain NativeScript

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


<Page xmlns:mdp="@nativescript-community/ui-material-progress">
<StackLayout horizontalAlignment="center">
<mdp:Progress value="50" maxValue="100"/>


mdprogress {
ripple-color: blue;
elevation: 4;

NativeScript + Angular

import { NativeScriptMaterialProgressModule } from "@nativescript-community/ui-material-progress/angular";

imports: [
<MDProgress v-model="value" maxValue="100"></MDProgress>

NativeScript + Vue

import ProgressPlugin from '@nativescript-community/ui-material-progress/vue';

<MDProgress value="50" maxValue="100"></MDProgress>



Inherite from NativeScript Progress so it already has all the same attributes.

  • elevation optional

An attribute to set the elevation of the progress. This will increase the 'drop-shadow' of the progress.

  • rippleColor optional

An attribute to set the ripple color of the progress.