Visitar URL original
docs-v8/plugins/animated-circle.md at develop · NativeScript/docs-v8 · GitHub
Skip to content

animated-circle.md

Latest commit

 

History

History
244 lines (195 loc) · 7.38 KB

animated-circle.md

File metadata and controls

244 lines (195 loc) · 7.38 KB
Raw
title Animated Circle
link https://raw.githubusercontent.com/NativeScript/plugins/main/packages/animated-circle/README.md

@nativescript/animated-circle

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

Android animated circle demo video iOS animated circle demo video
Android iOS

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

Property Type Default Description
rimColor Color #FF5722 The filled portion of the circle border's color.
barColor Color #3D8FF4 The remaining (unfilled) portion of the circle border.
rimWidth number 5 The border radius of the circle.
progress number 0 The current progress value.
startAngle number 0 The angle to start drawing from.
endAngle number 100 iOS only the end angle to stop drawing at.
animated boolean false Android only animation status.
animateFrom number 0 Android only the progress value to animate from.
animationDuration number 1000 Android only the duration to animate for.
text string "" The text inside of the circle.
textSize number 0 Text size, 0 will hide the text
textColor Color #ff0000 Text color

License

Apache License Version 2.0