8.7 released—WinterCG Compliance Part 1
Learn more

View on GitHub

@nativescript/animated-circle ​

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

Android animated circle demo videoiOS animated circle demo video
AndroidiOS

Contents ​

Installation ​

cli
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).
xml
<Page xmlns:ui="@nativescript/animated-circle">
  1. Access the AnimatedCircle view through the prefix.
xml
<ui:AnimatedCircle ... />

Core ​

xml
<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.
typescript
import { NativeScriptAnimatedCircleModule } from '@nativescript/animated-circle/angular'
imports: [NativeScriptAnimatedCircleModule]
  1. Use the view in HTML.
xml
<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.
ts
import { registerElement } from 'nativescript-vue'

registerElement(
  'AnimatedCircle',
  () => require('@nativescript/animated-circle').AnimatedCircle
)
  1. Use the view in a .vue file.
xml
<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.
ts
import { registerNativeViewElement } from 'svelte-native/dom'

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

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

Next
App Availability