nativescript-animated-circle
by Sean Perkins | v1.2.0
Animated circle progress in your NativeScript applications.
npm i --save nativescript-animated-circle
  • Version: 1.2.0
  • GitHub:
  • Downloads:
    • Last Day:   3
    • Last Week:  5
    • Last Month: 64

nativescript-animated-circle

npm npm

NPM

Creates an animated circle (animates the border of the circle) on iOS and Android.

iOS Android

Installation

tns plugin add nativescript-animated-circle

Usage

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:ui="nativescript-animated-circle">
<ui:AnimatedCircle
backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#FF5722"
barColor="#3D8FF4"
fillColor="#eee"
clockwise="true"
rimWidth="5"
progress="80"
text="bam"
textSize="28"
textColor="red" />
</Page>

Angular

To use this plugin in Angular, please register the element above your AppModule declaration.

import { registerElement } from 'nativescript-angular/element-registry'

registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);

Then you can leverage the plugin using <AnimatedCircle></AnimatedCircle> in your templates.

API

Property Default Description
rimColor #FF5722 The filled portion of the circle border's color.
barColor #3D8FF4 The remaining (unfilled) portion of the circle border.
clockwise true The CW (true) or CCW (false) draw direction.
rimWidth 5 The border radius of the circle.
progress 0 The current progress value.
startAngle 0 The angle to start drawing from.
endAngle 100 iOS only the end angle to stop drawing at.
animated false Android only animation status.
animateFrom 0 Android only the progress value to animate from.
animationDuration 1000 Android only the duration to animate for.
text "" The text inside of the circle.
textSize 0 Text size, 0 will hide the text
textColor #ff0000 Text color

Available for Contract

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: sean@devonite.com to discuss project details.

License

Apache License Version 2.0, January 2004