circle-progress-bar-component.ts

@Component({
  selector: 'circle-progress-bar',
  template: ``,
  styles: [`
    .circle-container__progress { // For conic-gradient approach
      stroke-dashoffset: var(--progress-stroke-dashoffset);
    }
    #progress-circle { // For SVG approach
      background: var(--progress-background);
    }
  `]
})
export class CircleProgressBarComponent {
  @Input() progress: number;

  constructor(private host: ElementRef<HTMLElement>) { }
    
  ngOnChanges(changes) {
    const value = changes.progress.currentValue;

    const property = 'stroke-dashoffset' // or 'background' depending on the approach you choose
    const progressValue = this.computeProgressValue(value);

    this.host.nativeElement.style.setProperty(`--progress-${property}`, progressValue);
  }
    
  computeProgressValue(val: number) {
    // if conic-gradient approach
    const angle = 360 * val;
    return `radial-gradient(white 50%, transparent 51%),
    conic-gradient(transparent 0deg ${angle}deg, gainsboro ${angle}deg 360deg),
    conic-gradient(orange 0deg, yellow 90deg, lightgreen 180deg, green)`;
    
    // if SVG approach
    return 100 - (100 * val);
  }
}