如何逆轉 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);
}