ngc-progressbar

Toc

• Toc
• Online demo
• Installation
• How to use
• types
• Styles

Online demo

You can find a demo at stackblitz/

Installation

npm i ngc-progressbar

How to use

Import ngc-progressbar to your app.module.ts, like this -

import { NgcProgressbarModule } from 'ngc-progressbar';
@NgModule({
    imports: [
        NgcProgressbarModule
    ]
})

Use in your component template like this -

<ngc-progressbar
    [type]="'circle'"
    [value]="10"
    id="progrebarOne">
</ngc-progressbar>

types

There are two type of progressbar -

Circle

<ngc-progressbar
    [type]="'circle'"
    [value]="10"
    id="progrebarOne">
</ngc-progressbar>

Line

<ngc-progressbar
    [type]="'bar'"
    [value]="80"
    id="progrebarTwo">
</ngc-progressbar>

Styles

For More enhancement on styles, create one object in the .ts file with respective css properties and pass that object as styles input, like this -

export class AppComponent {
  progressBarStyle1 = {
    // main canvas styling
    canvasBackground: '#f1f1f1',
    progressBarRadius: 100,

    // base bar styling
    baseStyles: {
      color: 'green',
      width: 40,
      style: 'round',
    },

    // parcentage bar stying
    barStyles: {
      color: '#fff',
      width: 30,
      style: 'round',
    },

    // text styling
    textStyles: {
      fontFamily: 'Arial',
      color: 'blue',
      fontSize: 30,
      position: 'center',
      html: '<span>text</span>',
    },
  };
}

<ngc-progressbar
    [type]="'circle'"
    [value]="10"
    id="progrebarOne"
    [styles]="progressBarStyle1">
</ngc-progressbar>

License

The MIT License