RxJS: Progress bar with countdown - ionic-framework

Question

I am trying to make a button with progress bar and text underneath the button that will tell how much time left. I am using ionic progress bar that take value between [0 ... 1].
public timeToClose = 5 * 1000;
...
const interval = this.timeToClose / 100;
timer(0, interval).pipe(
tap((v) => this.progress = v / 100),
map(i => this.timeToClose - i * interval),
take(100),
tap((timeLeft) => this.timeLeft = Math.floor(timeLeft / 1000) + 1),
finalize(() => this.closeModal()),
).subscribe();
But this looks awfull. How can i make it better code?

Answer 1

I would do it like that:
of(5).pipe( // <- time in seconds we want the delay.
map(v => v * 1000),
switchMap(delay => {
const start = new Date().getTime();
return timer(0, 250).pipe( // <- speed of updates.
map(() => (new Date().getTime() - start) / delay),
takeWhile(result => result < 1, true),
);
}),
tap(v => this.progress = v), // <- your stuff
finalize(() => this.closeModal()), // <- your stuff
).subscribe();

Answer 2

I would like to suggest a different approach:
// Total amount of steps
const steps = 9;
// Total "loading" time in milliseconds
const totalTimeMs = 3000;
interval(totalTimeMs / steps).pipe(
take(steps),
map(step => step + 1),
tap(step => {
const progressPercent = step / steps * 100;
// update your progress bar
})).subscribe();