nativescript-awesome-loaders
by triniwiz | v1.2.1
NativeScript plugin to add custom loading indicators
npm i --save nativescript-awesome-loaders

npm npm #Installation tns plugin add nativescript-awesome-loaders

#Usage

import {AwesomeLoaders} from 'nativescript-awesome-loaders';
let al = new AwesomeLoaders();

Set Width

al.width = 60

Set Height

al.height = 60

Set Indicator

al.indicator = "Pacman"

Set Indicator Color

al.indicatorColor= "#FFEB3B"

TypeScript

import {AwesomeLoaders} from 'nativescript-awesome-loaders';

let li = new AwesomeLoaders();
al.width = 60;
al.height = 60;
al.indicator = "SemiCircleSpin";
al.indicatorColor= "black";

JavaScript

var AwesomeLoaders = require('nativescript-awesome-loaders').AwesomeLoaders;
let li = new AwesomeLoaders();
al.width = 60;
al.height = 60;
al.indicator = "SemiCircleSpin";
al.indicatorColor= "black";

###Xml markup settings

IMPORTANT: Make sure you include xmlns:al="nativescript-awesome-loaders" on the Page element

e.g <al:AwesomeLoaders width="60" height="60" indicator="Pacman" indicatorColor="#FFEB3B" />

##Screenshot

ss

##Indicators

As seen above in the Screenshot, the indicators are as follows:

Row 1

  • BallPulse
  • BallGridPulse
  • BallClipRotate
  • BallClipRotatePulse

Row 2

  • SquareSpin
  • BallClipRotateMultiple
  • BallPulseRise
  • BallRotate

Row 3

  • CubeTransition
  • BallZigZag
  • BallZigZagDeflect
  • BallTrianglePath

Row 4

  • BallScale
  • LineScale
  • LineScaleParty
  • BallScaleMultiple

Row 5

  • BallPulseSync
  • BallBeat
  • LineScalePulseOut
  • LineScalePulseOutRapid

Row 6

  • BallScaleRipple
  • BallScaleRippleMultiple
  • BallSpinFadeLoader
  • LineSpinFadeLoader

Row 7

  • TriangleSkewSpin
  • Pacman
  • BallGridBeat
  • SemiCircleSpin