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-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: [email protected] to discuss project details.

License

Apache License Version 2.0, January 2004