0.0.4 • Published 5 years ago

@gto/lvl-circle v0.0.4

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

gto-lvl-circle

npm version npm downloads dependency status

Beautiful and simple skill/progress circles.

You do not need any dependencies. It works with Angular x.

Examples

Alt text

Quick Start

Install

npm i --save @gto/lvl-circle

Import the module

// app.module.ts...
import { GtoLvlCircleComponent } from '@gto/lvl-circle';
// ...
@NgModule({
  imports: [
    //...
    GtoLvlCircleComponent
  ],
})
export class AppModule {}

Use it!

    <input [(ngModel)]="percentage"  type="number" />
    <gto-lvl-circle shadowColor="#323232" [colors]="['#e46fab', '#e046a5', '#e4408a']" 
        [percent]="percentage">
    </gto-lvl-circle>

Properties

PropertyTypeDefault
circlesnumber3
colorsstring[]''white'',''white'','white'
widthnumber120
heightnumber120
percentnumber0
strokenumber4
shadowColorstringgray

LIVE DEMO

Demo on Stackblitz

Vanilla JS (not angular)

CodePin

Authors

  • Mauricio Joost Wolff - Initial work - GitHub

License

This project is licensed under the MIT License - see the LICENSE file for details