MgxCircularProgressBar

Description:

A library for circular progress bars components, an elegant way to rappresent your percentages.

$3

this Demo has different combinations of progress bars, choose your favorite one!

Also check this github page to find all original code or open issues MgxCircularProgressBar.

Installation:

``
npm install mgx-circular-progress-bar --save
`

Import and usage

include mgx-circular-progress module in your project, for example if you want to add it to your app module:
#### App Module

`js
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MgxCircularProgressModule } from 'mgx-circular-progress-bar';
//or in alternative
import { MgxCircularProgressBarModule,
MgxCircularProgressFullBarModule,
MgxCircularProgressPieModule } from'mgx-circular-progress-bar';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MgxCircularProgressModule
//or in alternative
MgxCircularProgressBarModule,
MgxCircularProgressFullBarModule,
MgxCircularProgressPieModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

$3

#### mgx-circular-progress-bar
`html

`
#### mgx-circular-progress-full-bar
`html

`
#### mgx-circular-progress-pie

`html

``

$3

attribute | value expected | meaning
------------ | ------------- | -------------
percentage | from 0 to 100| percentage already calculated
total | any number | in combination with barValue calculate the percentage, must be >= than barValue
barValue | any number | is the value of the progress bar, the percentage is calculated in relation to the total, must be <= to the total
diameter | any number | number of pixels to establish the total size of the circumference
fontSize | any number | override default font-size style of percentage value, is defined in pixels
color | HEX value | bar/pie/full-bar color; example: #e22525 default color: #3282b8
bgColor | HEX value | bar/pie/full-bar background color; example: #e0e0e0 default color: #eee
contentTemplate | TemplateRef | allows you to overwrite the default percentage with a new template, to use it you need to pass the reference of a template through its selector #tlpName to this attribute, in alternative you can pass your content directly inside tags, see the Demo for examples

$3

all the main ones plus the following

attribute | value expected | meaning
------------ | ------------- | -------------
contentSize | from 20 to 83| value to define the size of background circle, default: 83
pathPosition | from 20 to 90 | value to define a new bar position, default: 90

$3

all the main ones plus the following

attribute | value expected | meaning
------------ | ------------- | -------------
bgSize | from 0 to 10 | value to define the size of background circle, default: 10