Angular material 显示材质进度微调器内的图像

我想在我的Angular 7项目中添加一个material progress微调器和一个人的图像；表明收到的人的投票百分比。现在，我做不到。有办法处理吗？或者您知道有没有其他的微调器库来处理这个用例

以下是我需要的图像表示：

---

谢谢。

您可以操作css

剪辑路径：圆形（45%在50%49%）属性以调整微调器周围的图像

//------component.css
.basic-container {
  display: inline-block;
  position: relative;
}

img {
  max-width: 100%;
  position: absolute;
  max-height: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  clip-path: circle(45% at 50% 49%);
}

//------component.html
<div class="basic-container">
    <mat-spinner strokeWidth="2" [diameter]="100"></mat-spinner>
    <img src="https://www.gstatic.com/webp/gallery/2.jpg">
</div>

/----component.css
.基本容器{
显示：内联块；
位置：相对位置；
}
img{
最大宽度：100%；
位置：绝对位置；
最大高度：100%；
排名：0；
身高：100%；
宽度：100%；
剪辑路径：圆形（45%在50%49%）；
}
//------component.html

您可以将css类添加到mat微调器：

CSS:

HTML:

<mat-spinner class="avatar"></mat-spinner>

请看我的答案，希望它有帮助。它确实有效，但有点-太有效了。阿凡达正在用旋转器旋转：）看看css代码，prop
动画：无
应该停止图像旋转，但它也会改变一点旋转器：）稍微玩一下代码就会得到结果。谢谢你。@ArdaOğulÜçpınar很高兴，我可以帮忙。但我无法阻止旋转器。即使其模式设置为确定：/Ok，它也会始终旋转。要停止它，我应该使用
mat progress微调器
而不是
mat微调器
<mat-spinner class="avatar"></mat-spinner>

<mat-spinner class="avatar" style="background-image: url({{myImageUrl}}></mat-spinner>