angular-circliful v0.1.4-beta

Angular Circliful

Draws an animatable svg circle with some other features in your angular projects.

Getting started

Install circliful in your project

npm install angular-circliful

Once installed you need to import the module:

import {AngularCirclifulModule} from 'angular-circliful';

@NgModule({
  ...
  imports: [AngularCirclifulModule, ...],
  ...
})
export class AppModule {}

Integrate the component somewhere in your Application

export class YourComponent {
percent = { value: 60 };
strokeWidth: 15;
color: 'blue';
}

<ac-angular-circliful 
[percent]="percent" 
[strokeWidth]="strokeWidth"
[color]="color">
</ac-angular-circliful>

Available Options

percent percentage text and percentage fill of foreground circle

gradient start end end color of gradient

customClasses set custom css classes for each svg child element

progressColors holds an array of objects with color and percent, the percent value is the starting point for the color change

backgroundCircle config for the background circle

text config for the info text

point config for a point in the center

Donation

If you find this module useful or/and use it commercially feel free to donate me a cup of coffee :)