nativescript-awesome-loaders

NativeScript plugin to add custom loading indicators

Usage no npm install needed!

<script type="module">
  import nativescriptAwesomeLoaders from 'https://cdn.skypack.dev/nativescript-awesome-loaders';
</script>

README

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