MgxCircularProgressBar is a library of components for circular progress bars, an elegant way to represent your percentages.
circular progress bar in angular material, ng circle progress angular, angular progress bar, semi circle progress bar angular, ng circle progress example, circular progress bar angular
Creative Progress Bar Timeline Animation with CSS Only Without Javascript or Jquery
How to make use of it:
1. Install and add Mgx to your application 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>
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. |
Circular Progress Bars With SVG, MgxCircularProgressBar Plugin/Github, circular progress bar html css
See Demo And Download
Official Website(marco-gonella): Click Here
This superior jQuery/javascript plugin is developed by marco-gonella. For extra Advanced usage, please go to the official website.
