nativescript-awesome-loaders
NativeScript plugin to add custom loading indicators
npm i --save nativescript-awesome-loaders
- Version: 1.2.1
- GitHub: https://github.com/triniwiz/nativescript-awesome-loaders
- NPM: https://www.npmjs.com/package/nativescript-awesome-loaders
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
#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
##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