@Component({ /* ... */ })
export class ProgressBar {
  private destroyRef = inject(DestroyRef);
  progress = 0;

  ngAfterViewInit() {
     const start = Math.floor(performance.now());

    const step = (now: number) => {
      // stop if component was destroyed
      if (this.destroyRef.destroyed) return;

      const elapsed = now - start;
      this.progress = Math.min(100, (elapsed / 1000) * 100);

      // schedule next frame while still alive
      if (this.progress < 100) requestAnimationFrame(step);
    };

    requestAnimationFrame(step);
  }

@Component({ /* ... */ })
export class WorkerProcess {
  private readonly destroyRef = inject(DestroyRef);
  progress = 0;

  onProcess() {
    // Web Worker that performs heavy computation off the main thread
    const worker = new Worker(new URL('./heavy.worker', import.meta.url), { type: 'module' });

    worker.onmessage = (e: MessageEvent<{ progress: number }>) => {
      // stop if component was destroyed
      if (this.destroyRef.destroyed) return;
      this.progress = e.data.progress;  
    };

    // Kick off heavy task
    worker.postMessage({ cmd: 'start' /*, payload: bigData */ });
  }
}