带百分比的角进度条答案

【问题标题】：Angular progress bar with percentage带百分比的角进度条
【发布时间】：2017-08-03 01:27:50
【问题描述】：

我通过引用角度材料代码在我的代码中完成了角度进度循环。

我想在加载时添加百分比谢谢

【问题讨论】：

Wheeeere？告诉我们你做了什么。
进度循环>
这是代码。现在我需要为其添加进度百分比

标签： javascript html css angularjs angular

【解决方案1】：

对于 Angular2+，类似的东西会起作用：

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

这个想法很简单：

绝对定位进度条上的百分比。
沿途调整left属性。

【讨论】：

【解决方案2】：

目前，如果您使用 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;

【讨论】：