@nativescript/animated-circle

A plugin that creates a circular progress bar on iOS and Android.

| !Android animated circle demo video | !iOS animated circle demo video
|:--------|:---------
| Android | iOS

Contents

* Installation
* Use @nativescript/animated-circle
* Core
* Angular
* Vue
* Svelte
* React
* API
* License

Installation

``cli
npm install @nativescript/animated-circle
`

Use @nativescript/animated-circle

$3

1. Register the plugin namespace with Page's xmlns attribute providing your prefix( ui, for example).

`xml

`

2. Access the AnimatedCircle view through the prefix.

`xml

`

$3


`xml
xmlns:ui="@nativescript/animated-circle">

backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#FF5722"
barColor="#3D8FF4"
fillColor="#eee"
clockwise="true"
rimWidth="5"
progress="{{ circleProgress }}"
text="{{ circleProgress + '%'}}"
textSize="28"
textColor="red" />

`
---


$3

1. Add NativeScriptAnimatedCircleModule to the module imports where you want to use the view.

`typescript
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular';
imports: [NativeScriptAnimatedCircleModule];
`

2. Use the view in HTML.

`xml

`
---


$3

1. Register the view in the app.ts file.
`ts
import { registerElement } from 'nativescript-vue';

registerElement("AnimatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
`
2. Use the view in a .vue file.

`xml
backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#FF5722"
barColor="#3D8FF4"
fillColor="#eee"
clockwise="true"
rimWidth="5"
:progress="progress"
:text="progress + '%'"
textSize="28"
textColor="red" />
`
---


$3


1. Register the plugin's view in the app.ts file.

`ts
import {registerNativeViewElement} from "svelte-native/dom"

registerNativeViewElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
`
2. Use the view in markup.

`xml
backgroundColor="transparent"
width="200"
height="200"
animated="true"
animateFrom="0"
rimColor="#C4BF55"
barColor="#000"
clockwise="true"
rimWidth="20"
progress={ circleProgress }
text="80%"
textSize="28"
textColor="red"
/>
`
---


$3


1. Register the plugin's view in the app.ts file.
`ts
interface AnimatedCircleAttributes extends ViewAttributes {
progress?: number
animated?: boolean
animateFrom?: number
text?: string
textSize? : number
textColor?: string
rimColor? : string
barColor?: string
rimWidth?: number
clockwise?: boolean
}

declare global {
module JSX {
interface IntrinsicElements {

animatedCircle: NativeScriptProps
}
}
}

registerElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)

`

2. Use the view in markup.
`xml

backgroundColor="transparent"
width={200}
height={200}
animated={true}
animateFrom={0}
rimColor="#000"
barColor="#C4BF55"
clockwise={true}
rimWidth={20}
progress={this.state.progress}
text={this.state.progress + '%'}
textSize={28}
textColor="#000"
/>

`
---


API Reference


| Property | Type | Default | Description |
| ----------------- |------| ------- | ------------------------------------------------------ |
| rimColor | Color| #FF5722 | The filled portion of the circle border's color. |
| barColor |Color| #3D8FF4 | The remaining (unfilled) portion of the circle border. |
| rimWidth | number |5 | The border radius of the circle. |
| progress | number |0 | The current progress value. |
| startAngle | number |0 | The angle to start drawing from. |
| endAngle | number |100 | _iOS only_ the end angle to stop drawing at. |
| animated | boolean |false | _Android only_ animation status. |
| animateFrom | number |0 | _Android only_ the progress value to animate from. |
| animationDuration | number |1000 | _Android only_ the duration to animate for. |
| text | string |"" | The text inside of the circle. |
| textSize | number |0 | Text size, 0 will hide the text |
| textColor | Color |#ff0000` | Text color |

License

Apache License Version 2.0