角度進度條與百分比

Question

我已經通過參考角度材料代碼在代碼中完成了角度進度循環。

我要在加載時添加百分比謝謝

Answer 1

當前，如果您使用md-spinner和/或md-progress-circle則不支持以圓圈顯示百分比或標簽。

在這里檢查：

1） https://github.com/angular/material2/issues/3307

2） https://github.com/angular/material2/pull/1994#issuecomment-285943520

到目前為止，您必須將其顯示在小部件外部，如下所示，

https://plnkr.co/edit/lrbuECgLSZjLOMFPvm0s?p=preview

<div class="col-xs-4">
      <h1>{{seconds}} seconds</h1>

      <md-progress-circle class="col-xs-4" mode="determinate" value="+{{(seconds*100)/60}}" [attr.aria-valuemax]="max">
          {{seconds}} seconds
      </md-progress-circle>
</div>

專注於value屬性，您需要根據需要進行操作。 默認情況下， valuemax為100 。 在這里，在我的示例中，我顯示的seconds最多可以達到60 value 。 因此，我手動使用value屬性並將其轉換為與100 maxvalue兼容；

Answer 2

對於Angular2 +，遵循以下原則即可：

https://stackblitz.com/edit/angular-2ltyru

這個想法很簡單：

• 絕對位置進度條上的百分比。
• 沿途調整left屬性。