by bradmartin | v1.0.2
Nativescript plugin for press (hold) background animation.
npm i --save nativescript-hold-to-load

npm npm


Nativescript plugin for press (hold) background animation.

Android Only



Native Library



From your command prompt/termial go to your app's root folder and execute:

npm install nativescript-hold-to-load



xmlns:HL="nativescript-hold-to-load" loaded="pageLoaded">
<ActionBar title="Hold to Load" />

<HL:HoldToLoadLayout duration="1000" startColor="#3489db" strokeWidth="50" stopWhenFilled="true" holdComplete="{{ completed }}" holdReset="{{ reset }}">
<Label text="Press and Hold" class="message" textWrap="true"/>

<HL:HoldToLoadLayout startColor="#ff4081" endColor="#336699" strokeWidth="120" strokeAlpha="225" holdComplete="{{ completed }}" holdReset="{{ reset }}" angleChange="{{ angleChange }}">
<Image src="~/images/bart.png" class="circle-image" stretch="aspectFit" />



startColor - (color string) - required

Attribute to set the starting color.

endColor - (color string) - optional

Attribute to set the ending color of the gradient, if not specified the startColor will be used.

duration - (number) - optional

Set duration of fill time in milliseconds. Default is 1500.

strokeWidth - (number) - optional Sets the stroke width. Default is 0.

strokeAlpha - (number) - optional Sets the paint's alpha value. ** Value range is between 0 & 255. ** Default alpha value is 255.

playReverseAnimation - (boolean) - optional Sets if to animate the reverse animation. If set false, the loading will disappear instantly. Default is true.

stopWhenFilled - (boolean) - optional If set true, loading will stop when it's completed. If set false, loading will be reversed even if it is full. Default is true.

startAngle - (number) - optional Set the loading's starting point as angle. Default value is 270.