Nurturing Palpable Magnificence

    nativescript-animated-circle
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    nativescript-animated-circle

    npm npm

    NPM

    Creates an animated circle (animates the border of the circle) on iOS and Android.

    iOS Android

    Installation

    tns plugin add nativescript-animated-circle
    

    Usage

    <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="80"
            text="bam"
            textSize="28"
            textColor="red" />
    </Page>
    

    Angular

    To use this plugin in Angular, please register the element above your AppModule declaration.

    import { registerElement } from 'nativescript-angular/element-registry'
    
    registerElement('AnimatedCircle', () => require('nativescript-animated-circle').AnimatedCircle);
    

    Then you can leverage the plugin using <AnimatedCircle></AnimatedCircle> in your templates.

    API

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

    Available for Contract

    Need velocity on your NativeScript projects? I'm available to build beautiful and performant NativeScript applications for your business requirements. Email me direct: sean@devonite.com to discuss project details.

    License

    Apache License Version 2.0, January 2004

    Install

    npm i nativescript-animated-circle

    DownloadsWeekly Downloads

    5

    Version

    1.2.0

    License

    Apache-2.0

    Unpacked Size

    32 kB

    Total Files

    12

    Last publish

    Collaborators

    • sean-perkins