ng-circle-progress

Demo

Try out the demo!

About

It is a simple circle progress component created for angular based only on SVG graphics and has various of options to customize it.

Installation

To install this library, run:

Angular 10 or Angular 9 projects

$ npm install ng-circle-progress --save

Angular 8 or Angular 7 or Angular 6 projects

$ npm install [email protected] --save

Angular 5 or Angular 4 projects

$ npm install [email protected] --save

Once you have installed it, you can import it in any Angular application,

then from your Angular AppModule:

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:

<!-- You can now use it in app.component.html -->
<circle-progress
  [percent]="85"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

Options

Option | Type | Default | Description --- | --- | --- | --- percent | number | 0 | Number of percent you want to show maxPercent | number | 1000 | Max number of percent you want to show radius | number | 90 | Radius of circle clockwise | boolean | true | Whether to rotate clockwise or counter-clockwise responsive | boolean | false | Whether to make the circle responsive startFromZero | boolean | true | Whether to start the percent from zero showZeroOuterStroke | boolean | true | Whether to show the bar if percent is zero showTitle | boolean | true | Whether to display title showSubtitle | boolean | true | Whether to display subtitle showUnits | boolean | true | Whether to display units showImage | boolean | true | Whether to display image. All text will be hidden if showImage is true. showBackground | boolean | true | Whether to display background circle showInnerStroke | boolean | true | Whether to display inner stroke backgroundStroke | string | 'transparent' | Background stroke color backgroundStrokeWidth | number | 0 | Stroke width of background circle backgroundPadding | number | 5 | Padding of background circle backgroundGradient | boolean | false | Make background gradient backgroundColor | string | 'transparent' | Background color backgroundGradientStopColor | string | 'transparent' | Background gradient stop color backgroundOpacity | number | 1 | Opacity of background color space | number | 4 | Space between outer circle and inner circle toFixed | number | 0 | Using fixed digital notation in Title renderOnClick | boolean | true | Render when component is clicked units | string | '%' | Units showed aside the title unitsFontSize | string | '10' | Font size of units unitsFontWeight | string | '100' | Font weight of units unitsColor | string | '#444444' | Font color of units outerStrokeWidth | number | 8 | Stroke width of outer circle (progress circle) outerStrokeGradient | boolean | false | Make outer circle gradient outerStrokeColor | sting | '#78C000' | Stroke color of outer circle outerStrokeGradientStopColor | string | 'transparent' | Stroke gradient stop color of outer circle outerStrokeLinecap | sting | 'round' | Stroke linecap of outer circle. Possible values(butt, round, square, inherit) innerStrokeWidth | number | 4 | Stroke width of inner circle innerStrokeColor | sting | '#C7E596' | Stroke color of inner circle title | string\|Array<String> | 'auto' | text showed as title. Percentage is displayed when title equals 'auto'. titleFormat | Function | undefined | A callback function to format title. It returns a string or an array of string. titleColor | string | '#444444' | Font color of title titleFontSize | string | '20' | Font size of title titleFontWeight | string | '100' | Font weight of title subtitle | string\|Array<String> | 'Percent' | text showed as subtitle subtitleFormat | Function | undefined | A callback function to format subtitle. It returns a string or an array of string. subtitleColor | string | '#A9A9A9' | Font color of subtitle subtitleFontSize | string | '10' | Font size of subtitle subtitleFontWeight | string | '100' | Font weight of subtitle imageSrc | string | '/assets/images/music.svg' | Src of image imageHeight | number | 80 | Height of image imageWidth | number | 80 | Width of image animation | boolean | true | Whether to animate the outer circle when rendering animateTitle | boolean | true | Whether to animate the title when rendering animateSubtitle | boolean | false | Whether to animate the subtitle when rendering animationDuration | number | 500 | Duration of animation in microseconds class | string | '' | CSS class name for SVG element lazy | boolean | false | Pauses when out of viewport

// 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"
  }
}

License

MIT © bootsoon

This library was generated with Angular CLI version 10.1.3.

Code scaffolding

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.

Note: Don't forget to add --project ng-circle-progress or else it will be added to the default project in your angular.json file.

Build

Run ng build ng-circle-progress to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ng-circle-progress, go to the dist folder cd dist/ng-circle-progress and run npm publish.

Running unit tests

Run ng test ng-circle-progress to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.