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>
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, eg
.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
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.