gto-lvl-circle

Beautiful and simple skill/progress circles.

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

Examples

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

| Property | Type | Default | | :---: | :---: | :---: | | circles | number | 3 | | colors | string[] | [''white'',''white'','white'] | | width | number | 120 | | height | number | 120 | | percent | number | 0 | | stroke | number | 4 | | shadowColor | string | gray |

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