Create Circular Progress Bars With SVG And Angular – Mgx

Author: marco-gonella
Official Page: Go to website
License: MIT

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)

You Might Be Interested In:

Add Comment