Socket
Socket
Sign inDemoInstall

@nativescript/animated-circle

Package Overview
Dependencies
1
Maintainers
0
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nativescript/animated-circle

Animated circle progress in your NativeScript applications.


Version published
Weekly downloads
356
increased by9.54%
Maintainers
0
Created
Weekly downloads
 

Readme

Source

@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
  • Use @nativescript/animated-circle
  • API
  • License

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

Keywords

FAQs

Last updated on 25 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc