如何逆转 mat-progress-spinner 的进度

Question

我使用微调器作为计时器，我想反转进度方向。 如果你从 0 到 100，它是顺时针方向，但我的百分比从 100（15 分钟 = 900 秒）到 0（时间已经用完）。

<mat-progress-spinner [color]="primary"
   [value]="percentage"
   strokeWidth="8">
</mat-progress-spinner>

Answer 1

有两个问题：

1.- 根据值计算以分秒为单位的时间

我喜欢使用 Date 对象和日期管道

get time()
  {
    return new Date(0,0,0,0,0,900-9*this.value) 
  }

{{time|date:'mm:ss'}}

2.-使两个div居中，你可以使用，例如

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}
.div2
{
  z-index:100;
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

还有你的 .html

<div class="box">
  <mat-progress-spinner
        class="example-margin"
        color="primary"
        mode="determinate"
        [value]="value">
    </mat-progress-spinner>
  <div class="div2">{{time|date:'mm:ss'}}</div>
</div>

见堆栈闪电战

Answer 2

在 Material 将其作为指令实现之前，您可以使用一些 CSS 来欺骗我认为这是最好和最简单的解决方案。

水平翻转（在你的情况下）：

mat-progress-spinner {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

垂直翻转：

mat-progress-spinner {
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}