Angular material progress spinner

Question

Does anyone know how to show the incomplete portion in material progress spinner when the mode is determinate.Now I'm getting like this
.

but I want like this

Answer 1

This can be done but it's mostly a hack. The idea is to use a div with a border that matches the spinner and place it behind the spinner.

Example on StackBlitz

<div class="spinner-container">
    <div class="spinner-background">{{spinner.value}}%</div>
    <mat-progress-spinner #spinner
        color="primary"
        mode="determinate"
        value="75">
    </mat-progress-spinner>
</div>

The trick is the div styling, which needs to be sized and positioned to match your spinner exactly:

.spinner-container {
    position: relative;
}
.spinner-background {
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    overflow: hidden;
    border-color: rgba(103, 58, 183, 0.12);
    border-radius: 50%;
    border-style: solid;
    border-width: 10px;
}

EDIT:

I built a simple wrapper component for this that handles sizing and theme coloring automatically:

StackBlitz

spinner-container.ts:

import { coerceNumberProperty } from '@angular/cdk/coercion';
import { AfterViewInit, Component, ElementRef, Input, SimpleChanges } from '@angular/core';
import { CanColor, mixinColor, ThemePalette } from '@angular/material/core';

const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
export class SpinnerContainerBase {
  constructor(public _elementRef: ElementRef) { }
}
export const _SpinnerContainerMixinBase = mixinColor(SpinnerContainerBase, 'primary');

/**
 * @title Progress spinner container for spinner circle background and value display
 */
@Component({
  selector: 'spinner-container',
  templateUrl: 'spinner-container.html',
  styleUrls: ['spinner-container.scss'],
  host: {
    'class': 'spinner-container',
    '[style.width.px]': 'diameter',
    '[style.height.px]': 'diameter',
    '[style.line-height.px]': 'diameter'
  }
})
export class SpinnerContainer extends _SpinnerContainerMixinBase implements AfterViewInit, CanColor {

  constructor(public _elementRef: ElementRef) {
    super(_elementRef);
  }

  @Input() color: ThemePalette = 'primary';

  @Input()
  get diameter(): number { return this._diameter; }
  set diameter(size: number) {
    this._diameter = coerceNumberProperty(size);
  }
  private _diameter: number = BASE_SIZE;

  @Input() displayWith: (number) => string | number;

  @Input()
  get strokeWidth() { return this._strokeWidth; }
  set strokeWidth(newValue: number) {
    if (newValue) {
      this._strokeWidth = Math.min(this.diameter / 2, coerceNumberProperty(newValue));
      if (this._spinnerBackgroundElement) {
        this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
      }
    }
  }
  private _strokeWidth: number = BASE_STROKE_WIDTH;

  @Input()
  get value(): number { return this._value; }
  set value(newValue: number) {
    this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
  }
  private _value: number = 0;

  private _spinnerBackgroundElement: HTMLElement;

  ngAfterViewInit() {
    this._spinnerBackgroundElement = this._elementRef.nativeElement.querySelector('.spinner-background');
    this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
  }
}

spinner-container.html

<div class="spinner-value" *ngIf="displayWith">{{displayWith(value)}}</div>
<div class="spinner-background"></div>
<mat-progress-spinner 
    [color]="color" 
    [diameter]="diameter" 
    mode="determinate" 
    [strokeWidth]="strokeWidth" 
    [value]="value">
</mat-progress-spinner>

spinner-container.scss

:host {
    display: block;
    position: relative;

    .spinner-value, .spinner-background {
        position: absolute;
        width: inherit;
        height: inherit;
    }

    .spinner-value {
        text-align: center;
        overflow: hidden;
    }

    .spinner-background {
        opacity: .12;
        box-sizing: border-box;
        border-radius: 50%;
        border-style: solid;
    }
}

_spinner-container-theme.scss

@mixin spinner-container-theme($theme) {

    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);

    .spinner-background {
        .spinner-container.mat-primary & {
            color: mat-color($primary);
        }
        .spinner-container.mat-accent & {
            color: mat-color($accent);
        }
        .spinner-container.mat-warn & {
            color: mat-color($warn);
        }
    }
}