Skip to content

Commit 941031c

Browse files
nativescript-ossnativescript-oss
committed
chore(update-plugins): Wed May 13 09:03:13 UTC 2026
1 parent c6ea518 commit 941031c

7 files changed

Lines changed: 14 additions & 1754 deletions

File tree

‎content/plugins/animated-circle.md‎

Lines changed: 2 additions & 234 deletions
Original file line numberDiff line numberDiff line change
@@ -9,237 +9,5 @@ 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-
# @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
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).

0 commit comments

Comments
 (0)