在 Material Progress Spinner 中显示图像答案

【问题标题】：Showing an image inside Material Progress Spinner在 Material Progress Spinner 中显示图像
【发布时间】：2019-09-26 14:03:17
【问题描述】：

我想在我的 Angular 7 项目中添加一个材料进度微调器和其中一个人的图像；表明该人获得的投票百分比。目前，我做不到。有什么办法处理吗？或者你知道有没有其他的 spinner 库来处理这个用例？

这是我需要的图像表示：

谢谢。

【问题讨论】：

请看我的回答，希望对您有所帮助。

标签： angular-material material-design spinner angular7 progress

【解决方案1】：

您可以操纵 css clip-path: circle(45% at 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>

Demo showing image inside Angular Material Spinner

【讨论】：

稍微玩弄你的代码就可以得到结果。谢谢。
@ArdaOğulÜçpınar 很高兴，我可以帮忙。
但我无法停止微调器。它总是旋转，即使它的模式设置为确定：/
好的。为了阻止它，我应该使用 mat-progress-spinner 而不是 mat-spinner

【解决方案2】：

您可以向您的 mat-spinner 添加一个 css 类：

CSS：

avatar {
    background-image: url(https://cdn.iconscout.com/icon/free/png-256/avatar-372-456324.png);
    animation: none;
    background-size: 100px;
    width: 100px;
    height: 100px
}

HTML：

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

如果你想每次都显示不同的头像，可以加style

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

【讨论】：

它确实有效，但工作得有点多。阿凡达正在用微调器旋转:)
查看css代码，prop animation: none 应该会停止图像旋转，但它也会改变一点微调器:)