参考:

  1. <svg width="120" height="120" viewBox="0 0 120 120" class="progress__svg">
  2. <circle [attr.r]="radius" cx="60" cy="60" stroke-width="12" class="progress__meter" />
  3. <circle [style.strokeDasharray]="circumference" [style.strokeDashoffset]="dashoffset" [attr.r]="radius" cx="60" cy="60" stroke-width="12" class="progress__value" />
  4. </svg>
  1. import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
  2. @Component({
  3. selector: 'app-progress',
  4. templateUrl: './progress.component.html',
  5. styleUrls: ['./progress.component.css']
  6. })
  7. export class ProgressComponent implements OnInit, OnChanges {
  8. radius = 54;
  9. circumference = 2 * Math.PI * this.radius;
  10. dashoffset: number;
  11. constructor() {
  12. this.progress(0);
  13. }
  14. ngOnInit() { }
  15. private progress(value: number) {
  16. const progress = value / 100;
  17. this.dashoffset = this.circumference * (1 - progress);
  18. }
  19. }
文档更新时间: 2019-12-10 08:10   作者:admin