JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 124
  • Score
    100M100P100Q75594F
  • License Apache-2.0

Animated circle progress in your NativeScript applications.

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript/animated-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @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