Showing an image inside Material Progress Spinner

Question

I want to add to my Angular 7 project a material progress spinner and an image of a person in it; indicating the vote percentage the person received. For now, I couldn't do it. Any way to handle? Or is there any alternative spinner library you know handling this use-case?

Here is an image representation of what I need:

Thank you.

Answer 1

You can manipulate css clip-path: circle(45% at 50% 49%); property to adjust the image around your spinner.

//------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