Как поменять прогресс на мат-прогресс-спиннер

Question

Я использую счетчик в качестве таймера, и я хотел бы изменить направление прогресса. Это по часовой стрелке, если вы go от 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 .-сделать два деления по центру, вы можете использовать, например,

.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>

См. stackblitz