Create Circular Progress Bars With SVG And Angular – Mgx

Description:

Mgx is a JavaScript UI component library for Angular to create SVG based animated circular progress bars in modern web applications.

How to use it:

1. Install and add the Mgx into your app module.

# NPM
$ npm install mgx-circular-progress-bar --save

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MgxCircularProgressModule } from 'mgx-circular-progress-bar';
@NgModule({
  imports:      [ BrowserModule, FormsModule, MgxCircularProgressModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2. Add the Mgx component to your template.

<!-- Circular Progress Bar -->
<mgx-circular-progress-bar percentage="30"></mgx-circular-progress-bar>
<!-- Full Bar -->
<mgx-circular-progress-full-bar percentage="30"></mgx-circular-progress-full-bar>
<!-- Pie Style Progress Bar -->
<mgx-circular-progress-pie percentage="30"></mgx-circular-progress-pie>

3. Possible props to config the circular progress bar.

• percentage: from 0 to 100
• total: total value
• barValue: bar value
• diameter: the number of pixels
• fontSize: font size in pixels
• color: hex color
• bgColor: background color
• contentTemplate: used to overwrite the default percentage with a new template
• contentSize: from 20 to 83 (available for full bar)
• pathPosition: from 20 to 90 (available for full bar)
• bgSize: from 0 to 10 (available for pie style progress bar)