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

  
    
      angular-svg-round-progressbar
    
  



  

    
Sample progressbar

    

      
{{ current }}/{{ max }}

      
      
    

    
Partial colors
    

      
{{ current }}/{{ max }}

      
      
    
  

  

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