1.2.0 • Published 5 years ago
nativescript-animated-circle v1.2.0
nativescript-animated-circle
Creates an animated circle (animates the border of the circle) on iOS and Android.
| iOS | Android |
|---|---|
Installation
tns plugin add nativescript-animated-circleUsage
<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