使用SVG和Angular创建圆形进度条– Mgx

使用SVG和Angular创建圆形进度条– Mgx
发布时间 2020年4月12日
插件作者 marco-gonella

Mgx是Angular的JavaScript UI组件库,用于在现代Web应用程序中创建基于SVG的动画圆形进度条。

如何使用它:

1.安装Mgx并将其添加到您的应用模块中。

# 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.将Mgx组件添加到模板。

<!-- 圆形进度条 -->
<mgx-circular-progress-bar percentage="30"></mgx-circular-progress-bar>
<!-- 完整的Bar -->
<mgx-circular-progress-full-bar percentage="30"></mgx-circular-progress-full-bar>
<!-- 饼状进度条 -->
<mgx-circular-progress-pie percentage="30"></mgx-circular-progress-pie>