角度进度条与百分比

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

这个想法很简单：

• 绝对位置进度条上的百分比。
• 一路调整左属性。