@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

    Keywords

    none

    Install

    npm i @essent/nativescript-loading-indicator

    DownloadsWeekly Downloads

    8

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • wesley.quintor
    • spike1292
    • snorvisable
    • pcmulder
    • jphoiting
    • tomvoigt
    • baudin999
    • ssedlan
    • lmeijdam
    • petervdwal
    • jboeijenga
    • essent-bot
    • vani.anandamurthy
    • garkenbout
    • jayanti88
    • dylankruyff
    • abhinandan.nasalapure.essent
    • pavandara
    • jeroenvanderlast
    • c.elshof
    • thedcsherman
    • lucashorward
    • natasa
    • bojan80
    • hannahmauritz
    • dbeaart
    • ramondevaan_essent
    • sanderfasen
    • tophernl
    • ariska.keldermann.essent
    • nimitha
    • markdanney
    • sridharsekar
    • essent2020
    • mvlagen
    • emielvanrijn
    • n9iels
    • j.miletic
    • koengriffioenessent
    • geert-navara
    • davidfesten
    • gijsbertvancorstanje_essent
    • edwincaspersessent
    • lucaclae
    • wxavi
    • dimitriosmandekis
    • ui929171
    • m.cetkovic
    • bryansijs
    • mleen
    • ron.houben.essent
    • nielsvdhorst
    • stfnvar
    • walkerrunpdx