MgxCircularProgressBar

Description:

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

Demo

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

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 { }

Basic usage:

mgx-circular-progress-bar

 <mgx-circular-progress-bar percentage="20"></mgx-circular-progress-bar>

mgx-circular-progress-full-bar

 <mgx-circular-progress-full-bar percentage="20"></mgx-circular-progress-full-bar>

mgx-circular-progress-pie

 <mgx-circular-progress-pie percentage="20"></mgx-circular-progress-pie>

Main configurations

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

Full-Bar configurations

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

Pie configurations

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