Animated Circle
@nativescript/animated-circle
npm install @nativescript/animated-circleCreates 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
| Property | Default | Description |
|---|---|---|
rimColor |
#FF5722 |
The filled portion of the circle border’s color. |
barColor |
#3D8FF4 |
The remaining (unfilled) portion of the circle border. |
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 the circle. |
textSize |
0 |
Text size, 0 will hide the text |
textColor |
#ff0000 |
Text color |