在Material Progress Spinner中显示图像

Question

我想在我的Angular 7项目中添加一个材质进度微调器和其中的人物图像。指示此人获得的投票百分比。目前，我无法做到。有什么办法吗？还是您知道有其他备用微调器库可以处理此用例？

以下是我需要的图像：

谢谢。

Answer 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

Answer 2

您可以将css类添加到您的mat-spinner：

CSS：

trait ConfWatcher {

  implicit def actorSystem: ActorSystem

  private val confPath = "/home/codingkapoor/application.conf"
  private val appConfFile = File(confPath)
  private var appConfLastModified = appConfFile.lastModifiedTime

  val watcher: ActorRef = appConfFile.newWatcher(recursive = false)

  watcher ! on(EventType.ENTRY_MODIFY) { file =>
    if (appConfLastModified.compareTo(file.lastModifiedTime) < 0) {
      // TODO
      appConfLastModified = file.lastModifiedTime
    }
  }

}

HTML：

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
}

如果您想每次显示不同的头像，则可以添加<mat-spinner class="avatar"></mat-spinner>

style