:host {
  display: block;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

:host svg {
  height: 100%;
  width: 100%;
  transform-origin: center;
}

:host path {
  fill: transparent;
  stroke-width: 10px;
  transition: stroke .3s cubic-bezier(.35, 0, .25, 1);
}

:host[mode=indeterminate] svg {
  animation-duration: 5.25s, 2.887s;
  animation-name: mat-progress-spinner-sporadic-rotate, mat-progress-spinner-linear-rotate;
  animation-timing-function: cubic-bezier(.35, 0, .25, 1), linear;
  animation-iteration-count: infinite;
  transition: none;
}

@keyframes mat-progress-spinner-linear-rotate {
  0% {
      transform: rotate(0)
  }
  100% {
      transform: rotate(360deg)
  }
}

@keyframes mat-progress-spinner-sporadic-rotate {
  12.5% {
      transform: rotate(135deg)
  }
  25% {
      transform: rotate(270deg)
  }
  37.5% {
      transform: rotate(405deg)
  }
  50% {
      transform: rotate(540deg)
  }
  62.5% {
      transform: rotate(675deg)
  }
  75% {
      transform: rotate(810deg)
  }
  87.5% {
      transform: rotate(945deg)
  }
  100% {
      transform: rotate(1080deg)
  }
}