https://github.com/sean-perkins/nativescript-animated-circle

NativeScript plugin for animated progress borders on circles.
https://github.com/sean-perkins/nativescript-animated-circle

angular animated-circle nativescript plugin

Last synced: 6 days ago
JSON representation

NativeScript plugin for animated progress borders on circles.

• Host: GitHub
• URL: https://github.com/sean-perkins/nativescript-animated-circle
• Owner: sean-perkins
• License: apache-2.0
• Created: 2017-10-07T07:12:55.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-12-09T04:49:44.000Z (about 4 years ago)
• Last Synced: 2024-04-29T14:41:28.901Z (8 months ago)
• Topics: angular, animated-circle, nativescript, plugin
• Language: TypeScript
• Size: 1.96 MB
• Stars: 12
• Watchers: 3
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# nativescript-animated-circle

[![npm](https://img.shields.io/npm/v/nativescript-animated-circle.svg)](https://www.npmjs.com/package/nativescript-animated-circle)

[![npm](https://img.shields.io/npm/dt/nativescript-animated-circle.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-animated-circle)

[![NPM](https://nodei.co/npm/nativescript-animated-circle.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nativescript-animated-circle/)

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

| iOS | Android |

| --- | --- |

|| |

## Installation

```

tns plugin add nativescript-animated-circle

```

## Usage

```

    

```

#### Angular

To use this plugin in Angular, please register the element above your `AppModule` declaration.

```

import { registerElement } from 'nativescript-angular/element-registry'

registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);

```

Then you can leverage the plugin using `` in your templates.

## 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. |

| clockwise | true | The CW (true) or CCW (false) draw direction. |

| 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 of the circle. |

| textSize | 0 | Text size, 0 will hide the text |

| textColor | #ff0000 | Text color |

### Available for Contract

Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: [email protected] to discuss project details.

## License

Apache License Version 2.0, January 2004