Preview 2.0 is now in Public Beta!
Read the Announcement

@nativescript/animated-circle

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

AndroidiOS

Contents

Installation 

npm install @nativescript/animated-circle

Use @nativescript/animated-circle

Core

  1. Register the plugin namespace with Page's xmlns attribute providing your prefix( ui, for example).
<Page xmlns:ui="@nativescript/animated-circle">
  1. Access the AnimatedCircle view through the prefix.
<ui:AnimatedCircle ... />

Core 

<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="{{ circleProgress }}"
    text="{{ circleProgress + '%'}}"
    textSize="28"
    textColor="red"
  />
</Page>

Angular

  1. Add NativeScriptAnimatedCircleModule to the module imports where you want to use the view.
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular'
imports: [NativeScriptAnimatedCircleModule]
  1. Use the view in HTML.
<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>

Vue

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

registerElement(
  'AnimatedCircle',
  () => require('@nativescript/animated-circle').AnimatedCircle
)
  1. Use the view in a .vue file.
<AnimatedCircle
  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"
/>

Svelte

  1. Register the plugin's view in the app.ts file.
import { registerNativeViewElement } from 'svelte-native/dom'

registerNativeViewElement(
  'animatedCircle',
  () => require('@nativescript/animated-circle').AnimatedCircle
)
  1. Use the view in markup.
<animatedCircle
    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"
    />

React

  1. Register the plugin's view in the app.ts file.
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<AnimatedCircleAttributes, AnimatedCircle>
    }
  }
}

registerElement(
  'animatedCircle',
  () => require('@nativescript/animated-circle').AnimatedCircle
)
  1. Use the view in markup.
<stackLayout marginTop={30}>
  <animatedCircle
      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"
  />
</stackLayout>

API Reference

PropertyTypeDefaultDescription
rimColorColor#FF5722The filled portion of the circle border's color.
barColorColor#3D8FF4The remaining (unfilled) portion of the circle border.
rimWidthnumber5The border radius of the circle.
progressnumber0 The current progress value.
startAnglenumber0The angle to start drawing from.
endAnglenumber100iOS only the end angle to stop drawing at.
animatedbooleanfalseAndroid only animation status.
animateFromnumber0Android only the progress value to animate from.
animationDurationnumber1000Android only the duration to animate for.
textstring""The text inside of the circle.
textSize number0Text size, 0 will hide the text
textColorColor#ff0000Text color

License

Apache License Version 2.0