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 -

`
[type]="'circle'"
[value]="10"
id="progrebarOne">

`

types

There are two type of progressbar -

$3

`
[type]="'circle'"
[value]="10"
id="progrebarOne">

`

$3

`
[type]="'bar'"
[value]="80"
id="progrebarTwo">

`

$3

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: 'text',
},
};
}
`

`
[type]="'circle'"
[value]="10"
id="progrebarOne"
[styles]="progressBarStyle1">

``

$3

The MIT License