Ionic 3 圆形进度条 + 渐变色

新建项目

$ ionic start myapp blank

安装第三方库

$ npm install angular-svg-round-progressbar --save

导入模块

在 src/app/app.module.ts 中导入 RoundProgressModule:

import { RoundProgressModule } from 'angular-svg-round-progressbar';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    RoundProgressModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

具体实现

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      angular-svg-round-progressbar
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="container">
    <h2>Sample progressbar</h2>

    <div class="progress-wrapper">
      <div class="current" [ngStyle]="getOverlayStyle()">{{ current }}/{{ max }}</div>

      <round-progress [current]="current" [max]="max" [color]="color" [background]="background">
      </round-progress>
    </div>

    <h2>Partial colors</h2>
    <div class="progress-wrapper">
      <div class="current" [ngStyle]="getOverlayStyle()">{{ current }}/{{ max }}</div>

      <round-progress [current]="current" [max]="max" [color]="gradient ? 'url(#gradient)' : color" [background]="background">
      </round-progress>
    </div>
  </div>

  <svg>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="green" />
      <stop offset="95%" stop-color="gold" />
    </linearGradient>
  </svg>
</ion-content>

home.ts

import { Component, } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  current: number = 80;
  max: number = 100;
  color: string = '#45ccce';
  background: string = '#eaeaea';
  gradient: boolean = true;
  radius: number = 125;

  constructor(public navCtrl: NavController) { }

  getOverlayStyle() {
    let transform = 'translateY(-50%) ' + 'translateX(-50%)';

    return {
      'top': '50%',
      'bottom': 'auto',
      'left': '50%',
      'transform': transform,
      '-moz-transform': transform,
      '-webkit-transform': transform,
      'font-size': this.radius / 3.5 + 'px'
    };
  }

}

home.scss

page-home {
  * {
    box-sizing: border-box;
  }
  body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #fafafa;
  }
  h2 {
    margin: 0 0 20px;
  }
  .progress-wrapper {
    position: relative;
    margin: 20px auto;
    font-size: 20px;
  }
  .current {
    position: absolute;
    color: #bbb;
    font-weight: 100;
    line-height: 1;
  }
  round-progress {
    margin: auto;
    width: 200px !important;
    height: 200px !important;
  }
  .container {
    width: 100%;
    text-align: center;
  }
}

参考链接

1.https://github.com/crisbeto/angular-svg-round-progressbar
2.https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients