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

property	default	type	description
percent	/	object	the percentage of the circle
color	#666	string	color foreground circle
gradient	/	object	startColor and endColor for gradient of foreground circle
customClasses	/	object	set custom css classes for each svg child element
strokeLinecap	butt	string	style of stroke endings
strokeWidth	15	number	stroke width of foreground circle
progressColors	/	array	holds an array of objects with color and percent, the percent value is the starting point for the color change
backgroundCircle	/	object	config for the background circle
animate	true	boolean	animation of the foreground circle
animateInView	false	boolean	animation of the foreground circle in viewport
text	/	object	config for the info text
point	/	object	config for a point in the center

percent percentage text and percentage fill of foreground circle

property	default	type
value	/	number
color	/	string
noPercentageSign	false	boolean

gradient start end end color of gradient

property	default	type
startColor	/	string
endColor	/	string

customClasses set custom css classes for each svg child element

property	default	type
foregroundCircle	/	string
backgroundCircle	/	string
percent	/	string
text	/	string
svgContainer	/	string
point	/	string

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

property	default	type
color	/	string
percent	/	number

backgroundCircle config for the background circle

property	default	type
color	/	string
strokeWidth	/	number

text config for the info text

property	default	type
position	'middle'	string
x	/	number
y	/	number
content	/	string

point config for a point in the center

property	default	type
color	/	string
radius	/	number

Donation

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