How to reverse the progress on mat-progress-spinner

user_7604006 0
Viewed 723

I'm using the spinner as a timer and I would like to reverse the progress direction. It's clockwise if you go from 0 to 100, but my percentage is going from 100 (15 minutes = 900 seconds) to 0 (time has run out).

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

enter image description here

angular-material angular
2 Answers

there two problems:

1.- Calculate the time in minutes seconds depending the value

I like use a Date object and date pipe

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

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

2.-make two divs centered, you can use, e.g. 

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

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

See stackblitz

user_85581860

You can trick with some CSS which I think is the best and the easiest solution until Material implements it as a directive.

Horizontal flip (in your case):

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);
}

Vertical flip:

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);
}
user_97539850
Related