@essent/nativescript-loading-indicator
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

nativescript-loading-indicator

nativescript-loading-indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.

Installation

tns plugin add nativescript-loading-indicator

Example

var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator;

// or with TypeScript:
// import {LoadingIndicator} from "nativescript-loading-indicator";

var loader = new LoadingIndicator();

// optional options
// android and ios have some platform specific options
var options = {
  message: 'Loading...',
  progress: 0.65,
  android: {
    indeterminate: true,
    cancelable: false,
    max: 100,
    progressNumberFormat: "%1d/%2d",
    progressPercentFormat: 0.53,
    progressStyle: 1,
    secondaryProgress: 1
  },
  ios: {
    details: "Additional detail note!",
    margin: 10,
    dimBackground: true,
    color: "#4B9ED6", // color of indicator and labels
    // background box around indicator
    // hideBezel will override this if true
    backgroundColor: "yellow",
    hideBezel: true, // default false, can hide the surrounding bezel
    view: UIView, // Target view to show on top of (Defaults to entire window)
    mode: // see iOS specific options below
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();

Options

  • message: string Your message!
  • progress: number Set progress display

Android Specific

iOS Specific

Quick Mode Reference:

  • MBProgressHUDModeDeterminate
  • MBProgressHUDModeAnnularDeterminate
  • MBProgressHUDModeDeterminateHorizontalBar
  • MBProgressHUDModeText
  • MBProgressHUDModeCustomView
    • use with customView: string - local path to an image file

Screenshots

Loading indicator on iOS

Loading indicator on Android

Readme

Keywords

none

Package Sidebar

Install

npm i @essent/nativescript-loading-indicator

Weekly Downloads

7

Version

4.0.0

License

MIT

Unpacked Size

16.2 kB

Total Files

18

Last publish

Collaborators

  • patrickvangemert
  • fernandesyuri
  • davidvpe
  • ramkrivaseon
  • p33969
  • s69018
  • erikbrgr-essent
  • radurrant
  • veslav
  • mrtnvh
  • jorisdiesvelt
  • ilija_essent
  • wouter.everse.essent.nl
  • m90992
  • niels_essent
  • nl.santhosh.kumar
  • stefanipeters
  • jeroenverhoevenessent
  • thijsvanerp
  • vinodperumal01
  • dmestry
  • panagiotis.doxopoulos
  • nishanthessent
  • ekta123
  • icyrizard
  • thomasessent
  • melihkorkmaz
  • luukpook
  • svloon
  • spike1292
  • rik_bosch_essent
  • wvdkop-essent
  • sharanyasl
  • sreejanarayanankuttty
  • alihabib
  • geert.jan.evers
  • jimfranke1
  • areijngoudt
  • thijsbloks
  • sanjaikumarsankar
  • essent-mobile-app-team
  • jelle-tno
  • jharskamp
  • m71629
  • frwielstra
  • joren-navara
  • thomas_smeele
  • btaluy
  • geert.rutten
  • vincentbitter
  • falcoworkstno
  • cdebruin
  • niek-essent
  • wesley.quintor
  • snorvisable
  • pcmulder
  • jphoiting
  • tomvoigt
  • lmeijdam
  • petervdwal
  • jboeijenga
  • essent-bot
  • vani.anandamurthy
  • jayanti88
  • abhinandan.nasalapure.essent
  • pavandara
  • jeroenvanderlast
  • c.elshof
  • thedcsherman
  • lucashorward
  • hannahmauritz
  • dbeaart
  • tophernl
  • nimitha
  • markdanney
  • sridharsekar
  • mvlagen
  • emielvanrijn
  • n9iels
  • j.miletic
  • koengriffioenessent
  • geert-navara
  • davidfesten
  • lucaclae
  • ui929171
  • m.cetkovic
  • mleen
  • nielsvdhorst
  • stfnvar
  • walkerrunpdx