Ionic圆环进度条

       最近小编做的项目有个业务需求是对于自己的情况和目标有一个进度环的展示.

       如图:

       

      代码如下:

Ts文件中:

先定义两个变量max以及current

  //圆环进度条
  color: string = '#1890fb';
  backgound: string = '#eaeaea';
  radius: number = 100;
  current:number=0;
  max:number=0;

  //圆形进度条函数
  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'
    };
  }

HTML页面:对于页面内容使用双向绑定同步数据

        &