We're excited to announce Preview 2.0 is entering Public Beta!
Read the Announcement

@nativescript/animated-circle 

ns plugin add @nativescript/animated-circle

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

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 NativeScript

  • Add the NativeScriptAnimatedCircleModule to your module imports where you will use the plugin.
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular'
imports: [NativeScriptAnimatedCircleModule]

<AnimatedCircle
  backgroundColor="transparent"
  width="200"
  height="200"
  animated="true"
  animateFrom="0"
  rimColor="#fff000"
  barColor="#ff4081"
  rimWidth="25"
  progress="{{ circleProgress }}"
  text=""
  textSize="22"
  textColor="#336699"
/>

API

PropertyDefaultDescription
rimColor#FF5722The filled portion of the circle border's color.
barColor#3D8FF4The remaining (unfilled) portion of the circle border.
rimWidth5The border radius of the circle.
progress0The current progress value.
startAngle0The angle to start drawing from.
endAngle100iOS only the end angle to stop drawing at.
animatedfalseAndroid only animation status.
animateFrom0Android only the progress value to animate from.
animationDuration1000Android only the duration to animate for.
text""The text inside of the circle.
textSize0Text size, 0 will hide the text
textColor#ff0000Text color

License

Apache License Version 2.0