Vue は動的な円形のパーセンテージ進捗バーを実装します

.pie {
  表示: インラインブロック;
  位置: 相対的;
  幅: 150ピクセル;
  高さ: 150px;
  上マージン: 40px;
  境界線の半径: 50%;
  背景: #ccc;
  背景画像: linear-gradient(右へ、透明度 50%、#4479FD 0);
  色: 透明;
  テキスト配置: 中央;
}

.pie::before {
  コンテンツ： '';
  位置: 絶対;
  上: 0; 左: 50%;
  幅: 50%; 高さ: 100%;
  境界線の半径: 0 100% 100% 0 / 50%;
  背景色: 継承;
  変換の原点: 左;
  アニメーション: スピン 5 秒 線形無限、背景 10 秒 ステップ終了 無限。
}
@keyframes スピン {
  に { transform: rotate(.5turn); }
}
@キーフレーム背景{
  50% { 背景: #4479FD; }
} 

アニメーション再生状態: 一時停止;
アニメーション遅延: -60秒;

<div class="pie">
  <div class="pie-inner">
  {{num}}%
  </div>
</div>

startAnimate (ステップ、制限、速度) {
  タイムアウトを設定する(() => {
  // numはパーセンテージです if (this.num < limit) {
      this.num += ステップ
      this.startAnimate(ステップ、制限、速度)
    } それ以外 {
      this.num = 制限
    }
  }、 スピード）
}

計算: {
    遅れ （） {
      `-${this.num}s` を返す
    }
}