ng-circle-progress v1.7.1

ng-circle-progress

Demo

Try out the demo!

About

It is a simple circle progress component created for angular based only on SVG graphics.

Installation

To install this library, run:

Angular 15 or Angular 14 projects

$ npm install ng-circle-progress --save

Angular 13 or Angular 12 or Angular 11 Angular 10 or Angular 9 projects

$ npm install ng-circle-progress@1.6.0 --save

Angular 8 or Angular 7 or Angular 6 projects

$ npm install ng-circle-progress@1.5.1 --save

Angular 5 or Angular 4 projects

$ 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:

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

// 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 -c production 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 -c production, 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.