Skip to content

Commit f172561

Browse files
nativescript-ossnativescript-oss
committed
chore(update-plugins): Thu May 14 08:58:00 UTC 2026
1 parent 941031c commit f172561

7 files changed

Lines changed: 1754 additions & 14 deletions

File tree

‎content/plugins/animated-circle.md‎

Lines changed: 234 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,237 @@ editUrl: https://github.com/NativeScript/plugins/tree/main/packages/animated-cir
99
<ViewOnGitHubButton href="https://github.com/NativeScript/plugins/tree/main/packages/animated-circle"/>
1010
</p>
1111

12-
429: Too Many Requests
13-
For more on scraping GitHub and how it may affect your rights, please review our Terms of Service (https://docs.github.com/en/site-policy/github-terms/github-terms-of-service).
12+
# @nativescript/animated-circle
13+
14+
A plugin that creates a circular progress bar on iOS and Android.
15+
16+
| ![Android animated circle demo video](https://raw.githubusercontent.com/NativeScript/plugins/main/packages/animated-circle/images/animated-circle-android.gif) | ![iOS animated circle demo video](https://raw.githubusercontent.com/NativeScript/plugins/main/packages/animated-circle/images/animated-circle-ios.gif) |
17+
| :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
18+
| `Android` | `iOS` |
19+
20+
## Contents
21+
22+
- [Installation](#installation)
23+
- [Use @nativescript/animated-circle](#use-nativescriptanimated-circle)
24+
- [Core](#core)
25+
- [Angular](#angular)
26+
- [Vue](#vue)
27+
- [Svelte](#svelte)
28+
- [React](#react)
29+
- [API](#api)
30+
- [License](#license)
31+
32+
## Installation
33+
34+
```cli
35+
npm install @nativescript/animated-circle
36+
```
37+
38+
## Use @nativescript/animated-circle
39+
40+
### Core
41+
42+
1. Register the plugin namespace with Page's `xmlns` attribute providing your prefix( `ui`, for example).
43+
44+
```xml
45+
<Page xmlns:ui="@nativescript/animated-circle">
46+
```
47+
48+
2. Access the `AnimatedCircle` view through the prefix.
49+
50+
```xml
51+
<ui:AnimatedCircle ... />
52+
```
53+
54+
### Core
55+
56+
```xml
57+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
58+
xmlns:ui="@nativescript/animated-circle">
59+
60+
<ui:AnimatedCircle
61+
backgroundColor="transparent"
62+
width="200"
63+
height="200"
64+
animated="true"
65+
animateFrom="0"
66+
rimColor="#FF5722"
67+
barColor="#3D8FF4"
68+
fillColor="#eee"
69+
clockwise="true"
70+
rimWidth="5"
71+
progress="{{ circleProgress }}"
72+
text="{{ circleProgress + '%'}}"
73+
textSize="28"
74+
textColor="red" />
75+
</Page>
76+
```
77+
78+
---
79+
80+
### Angular
81+
82+
1. Add `NativeScriptAnimatedCircleModule` to the module imports where you want to use the view.
83+
84+
```typescript
85+
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular'
86+
imports: [NativeScriptAnimatedCircleModule]
87+
```
88+
89+
2. Use the view in HTML.
90+
91+
```xml
92+
<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" [progress]="circleProgress" [text]="progress + '%'" textSize="22" textColor="#336699"></AnimatedCircle>
93+
```
94+
95+
---
96+
97+
### Vue
98+
99+
1. Register the view in the `app.ts` file.
100+
101+
```ts
102+
import { registerElement } from 'nativescript-vue'
103+
104+
registerElement(
105+
'AnimatedCircle',
106+
() => require('@nativescript/animated-circle').AnimatedCircle,
107+
)
108+
```
109+
110+
2. Use the view in a `.vue` file.
111+
112+
```xml
113+
<AnimatedCircle
114+
backgroundColor="transparent"
115+
width="200"
116+
height="200"
117+
animated="true"
118+
animateFrom="0"
119+
rimColor="#FF5722"
120+
barColor="#3D8FF4"
121+
fillColor="#eee"
122+
clockwise="true"
123+
rimWidth="5"
124+
:progress="progress"
125+
:text="progress + '%'"
126+
textSize="28"
127+
textColor="red" />
128+
```
129+
130+
---
131+
132+
### Svelte
133+
134+
1. Register the plugin's view in the `app.ts` file.
135+
136+
```ts
137+
import { registerNativeViewElement } from 'svelte-native/dom'
138+
139+
registerNativeViewElement(
140+
'animatedCircle',
141+
() => require('@nativescript/animated-circle').AnimatedCircle,
142+
)
143+
```
144+
145+
2. Use the view in markup.
146+
147+
```xml
148+
<animatedCircle
149+
backgroundColor="transparent"
150+
width="200"
151+
height="200"
152+
animated="true"
153+
animateFrom="0"
154+
rimColor="#C4BF55"
155+
barColor="#000"
156+
clockwise="true"
157+
rimWidth="20"
158+
progress={ circleProgress }
159+
text="80%"
160+
textSize="28"
161+
textColor="red"
162+
/>
163+
```
164+
165+
---
166+
167+
### React
168+
169+
1. Register the plugin's view in the `app.ts` file.
170+
171+
```ts
172+
interface AnimatedCircleAttributes extends ViewAttributes {
173+
progress?: number
174+
animated?: boolean
175+
animateFrom?: number
176+
text?: string
177+
textSize?: number
178+
textColor?: string
179+
rimColor?: string
180+
barColor?: string
181+
rimWidth?: number
182+
clockwise?: boolean
183+
}
184+
185+
declare global {
186+
module JSX {
187+
interface IntrinsicElements {
188+
animatedCircle: NativeScriptProps<
189+
AnimatedCircleAttributes,
190+
AnimatedCircle
191+
>
192+
}
193+
}
194+
}
195+
196+
registerElement(
197+
'animatedCircle',
198+
() => require('@nativescript/animated-circle').AnimatedCircle,
199+
)
200+
```
201+
202+
2. Use the view in markup.
203+
204+
```xml
205+
<stackLayout marginTop={30}>
206+
<animatedCircle
207+
backgroundColor="transparent"
208+
width={200}
209+
height={200}
210+
animated={true}
211+
animateFrom={0}
212+
rimColor="#000"
213+
barColor="#C4BF55"
214+
clockwise={true}
215+
rimWidth={20}
216+
progress={this.state.progress}
217+
text={this.state.progress + '%'}
218+
textSize={28}
219+
textColor="#000"
220+
/>
221+
</stackLayout>
222+
```
223+
224+
---
225+
226+
## API Reference
227+
228+
| Property | Type | Default | Description |
229+
| ------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------ |
230+
| `rimColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#FF5722` | The filled portion of the circle border's color. |
231+
| `barColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#3D8FF4` | The remaining (unfilled) portion of the circle border. |
232+
| `rimWidth` | `number` | `5` | The border radius of the circle. |
233+
| `progress` | `number` | `0 ` | The current progress value. |
234+
| `startAngle` | `number` | `0` | The angle to start drawing from. |
235+
| `endAngle` | `number` | `100` | _iOS only_ the end angle to stop drawing at. |
236+
| `animated` | `boolean` | `false` | _Android only_ animation status. |
237+
| `animateFrom` | `number` | `0` | _Android only_ the progress value to animate from. |
238+
| `animationDuration` | `number` | `1000` | _Android only_ the duration to animate for. |
239+
| `text` | `string` | `""` | The text inside of the circle. |
240+
| `textSize ` | `number` | `0` | Text size, 0 will hide the text |
241+
| `textColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#ff0000` | Text color |
242+
243+
## License
244+
245+
Apache License Version 2.0

0 commit comments

Comments
 (0)