## Demo
npm install ng-circle-progress
It is a simple circle progress component created for angular based only on SVG graphics.
To install this library, run:
``bash`
$ npm install ng-circle-progress --save
`bash`
$ npm install ng-circle-progress@1.6.0 --save
`bash`
$ npm install ng-circle-progress@1.5.1 --save
`bash`
$ npm install ng-circle-progress@1.0.0 --save
Once you have installed it, you can import it in any Angular application,
then from your Angular AppModule:
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import ng-circle-progress
import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify ng-circle-progress as an import
NgCircleProgressModule.forRoot({
// set defaults here
radius: 100,
outerStrokeWidth: 16,
innerStrokeWidth: 8,
outerStrokeColor: "#78C000",
innerStrokeColor: "#C7E596",
animationDuration: 300,
...
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Once NgCircleProgressModule is imported, you can use CircleProgressComponent in your Angular application:
`xml
[radius]="100"
[outerStrokeWidth]="16"
[innerStrokeWidth]="8"
[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"
[animation]="true"
[animationDuration]="300"
>
`
Option | Type | Default | Description
--- | --- | --- | ---
percent | number | 0 | Number of percent you want to shownumber
maxPercent | | 1000 | Max number of percent you want to shownumber
radius | | 90 | Radius of circleboolean
clockwise | | true | Whether to rotate clockwise or counter-clockwiseboolean
responsive | | false | Whether to make the circle responsiveboolean
startFromZero | | true | Whether to start the percent from zeroboolean
showZeroOuterStroke | | true | Whether to show the bar if percent is zeroboolean
showTitle | | true | Whether to display titleboolean
showSubtitle | | true | Whether to display subtitleboolean
showUnits | | true | Whether to display unitsboolean
showImage | | true | Whether to display image. All text will be hidden if showImage is true.boolean
showBackground | | true | Whether to display background circleboolean
showInnerStroke | | true | Whether to display inner strokestring
backgroundStroke | | 'transparent' | Background stroke colornumber
backgroundStrokeWidth | | 0 | Stroke width of background circlenumber
backgroundPadding | | 5 | Padding of background circleboolean
backgroundGradient | | false | Make background gradientstring
backgroundColor | | 'transparent' | Background colorstring
backgroundGradientStopColor | | 'transparent' | Background gradient stop colornumber
backgroundOpacity | | 1 | Opacity of background colornumber
space | | 4 | Space between outer circle and inner circlenumber
toFixed | | 0 | Using fixed digital notation in Titleboolean
renderOnClick | | true | Render when component is clickedstring
units | | '%' | Units showed aside the titlestring
unitsFontSize | | '10' | Font size of unitsstring
unitsFontWeight | | '100' | Font weight of unitsstring
unitsColor | | '#444444' | Font color of unitsnumber
outerStrokeWidth | | 8 | Stroke width of outer circle (progress circle)boolean
outerStrokeGradient | | false | Make outer circle gradientsting
outerStrokeColor | | '#78C000' | Stroke color of outer circlestring
outerStrokeGradientStopColor | | 'transparent' | Stroke gradient stop color of outer circlesting
outerStrokeLinecap | | 'round' | Stroke linecap of outer circle. Possible values(butt, round, square, inherit)number
innerStrokeWidth | | 4 | Stroke width of inner circlesting
innerStrokeColor | | '#C7E596' | Stroke color of inner circlestring\|Array
title | | 'auto' | text showed as title. Percentage is displayed when title equals 'auto'.Function
titleFormat | | undefined | A callback function to format title. It returns a string or an array of string.string
titleColor | | '#444444' | Font color of titlestring
titleFontSize | | '20' | Font size of titlestring
titleFontWeight | | '100' | Font weight of titlestring\|Array
subtitle | | 'Percent' | text showed as subtitleFunction
subtitleFormat | | undefined | A callback function to format subtitle. It returns a string or an array of string.string
subtitleColor | | '#A9A9A9' | Font color of subtitlestring
subtitleFontSize | | '10' | Font size of subtitlestring
subtitleFontWeight | | '100' | Font weight of subtitlestring
imageSrc | | '/assets/images/music.svg' | Src of imagenumber
imageHeight | | 80 | Height of imagenumber
imageWidth | | 80 | Width of imageboolean
animation | | true | Whether to animate the outer circle when renderingboolean
animateTitle | | true | Whether to animate the title when renderingboolean
animateSubtitle | | false | Whether to animate the subtitle when renderingnumber
animationDuration | | 500 | Duration of animation in microsecondsstring
class | | '' | CSS class name for SVG elementboolean
lazy | | false | Pauses when out of viewport
`typescript
// subtitleFormat callback example
formatSubtitle = (percent: number) : string => {
if(percent >= 100){
return "Congratulations!"
}else if(percent >= 50){
return "Half"
}else if(percent > 0){
return "Just began"
}else {
return "Not started"
}
}
`
MIT © bootsoon
This library was generated with Angular CLI version 10.1.3.
Run ng generate component component-name --project ng-circle-progress to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-circle-progress.--project ng-circle-progress
> Note: Don't forget to add or else it will be added to the default project in your angular.json file.
Run ng build ng-circle-progress -c production to build the project. The build artifacts will be stored in the dist/ directory.
After building your library with ng build ng-circle-progress -c production, go to the dist folder cd dist/ng-circle-progress and run npm publish.
Run ng test ng-circle-progress to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help` or go check out the Angular CLI README.