What techniques can be used to create a more streamlined progress bar in coding?

Question

What techniques can be used to create a more streamlined progress bar in coding?

Adding a progress bar has been a bit tricky for me - sometimes it fills too slowly or too quickly, but for the most part, it works fine.

I believe there must be a more efficient way to program this since my current method involves too many calculations for just one progress bar.

Below is the code I am using:

ts:

startProgressbar(timeToWait: number) {
this.progress = 0;
const interval = setInterval(() => {
  let addvalue = (1 / timeToWait * 100) / 64;
  this.progress += addvalue;
  if (this.progress >= 100) {
    this.progress = 100;
    window.clearInterval(interval);
  }
}, 15.625); }

The function is called again immediately after completion because the next slide of the slideshow follows.

The value of the progress reflects the width of the progress bar, always in percentage form.

Wondering about the number 15.625? It represents a 64th of a second, allowing the progress bar to update smoothly 64 times per second.

My HTML structure is quite simple:

<div class="progressbar" [ngStyle]="{'width': progress+'%'}"></div>

If you have a better solution than mine, I would greatly appreciate it. Thank you!

[EDIT]: Sometimes the progress bar starts filling late and does not reach 100% before the next slide appears, causing timing issues. Other times it fills up too quickly and remains at 100% until the next slide loads.

angular typescript

Answer 1

Answer №1

Why not consider using Rxjs timer?

interval(timeToWait):Observable<number>
  {
    let progress = 0;
    return timer(0, timeToWait)
      .pipe(
        takeWhile(() => progress <= 100),
        map(()=>progress<100?progress:100),
        tap(() => (progress += 10))
      )
  }

Implementation:

this.interval(200).subscribe((res) => {
        console.log(res);
      });

Update: Added stackblitz demo link: stackblitz

Update 2: Special thanks to @Ritaj for the insight that timer returns a stream (0,1,2,3,4,...), allowing us to simplify with:

 return timer(0, timeToWait)
  .pipe(
    map((progress)=>progress*5<100?progress*5:100),
    takeWhile((progress) => progress <= 100)
  )

Update 3: Following advice from this insightful response on SO, we can now include the last value by modifying the interval function as follows:

 interval(timeToWait) {
    const initial = new Date().getTime();
    return timer(0, 200).pipe(
      map(()=> new Date().getTime()),
      takeWhile((res) => res<=initial+timeToWait,true),
      map(now=>{
        const porc = (100 * (now - initial)) / timeToWait;
        return porc<100?Math.round(porc):100
      })
    );

Answer 2

Why not consider using Rxjs timer?

interval(timeToWait):Observable<number>
  {
    let progress = 0;
    return timer(0, timeToWait)
      .pipe(
        takeWhile(() => progress <= 100),
        map(()=>progress<100?progress:100),
        tap(() => (progress += 10))
      )
  }

Implementation:

this.interval(200).subscribe((res) => {
        console.log(res);
      });

Update: Added stackblitz demo link: stackblitz

Update 2: Special thanks to @Ritaj for the insight that timer returns a stream (0,1,2,3,4,...), allowing us to simplify with:

 return timer(0, timeToWait)
  .pipe(
    map((progress)=>progress*5<100?progress*5:100),
    takeWhile((progress) => progress <= 100)
  )

Update 3: Following advice from this insightful response on SO, we can now include the last value by modifying the interval function as follows:

 interval(timeToWait) {
    const initial = new Date().getTime();
    return timer(0, 200).pipe(
      map(()=> new Date().getTime()),
      takeWhile((res) => res<=initial+timeToWait,true),
      map(now=>{
        const porc = (100 * (now - initial)) / timeToWait;
        return porc<100?Math.round(porc):100
      })
    );

Answer 3

Answer №2

For efficient waiting in Javascript, I highly recommend following the best practices outlined here. Take a look at this StackBlitz link where I have provided example code for a progress bar that implements these recommended practices.

export class AppComponent  {
  name = 'Angular';
  public progress = 0;
  public timeToWait: number = 1;

  private default_ms = 8.33; // Running 120 times a second.
  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  public async startProgressBar(): Promise<void> {
    this.progress = 0;
    while(this.progress <= 100) {
      this.progress += (1 / this.timeToWait);
      await this.sleep(this.default_ms);
    }
  }
}

It's hard to pinpoint exactly why your current solution is encountering bugs. It may not be ideal practice to call window.clearInterval within the interval function. Feel free to give this solution a try and let me know if it resolves your issue.

Answer 4

For efficient waiting in Javascript, I highly recommend following the best practices outlined here. Take a look at this StackBlitz link where I have provided example code for a progress bar that implements these recommended practices.

export class AppComponent  {
  name = 'Angular';
  public progress = 0;
  public timeToWait: number = 1;

  private default_ms = 8.33; // Running 120 times a second.
  private sleep(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  public async startProgressBar(): Promise<void> {
    this.progress = 0;
    while(this.progress <= 100) {
      this.progress += (1 / this.timeToWait);
      await this.sleep(this.default_ms);
    }
  }
}

It's hard to pinpoint exactly why your current solution is encountering bugs. It may not be ideal practice to call window.clearInterval within the interval function. Feel free to give this solution a try and let me know if it resolves your issue.

What techniques can be used to create a more streamlined progress bar in coding?

Answer №1

Answer №2

Similar questions

What is the best way to retrieve a property from a conditional type using generics?

Access the system by authenticating with the Firestore database collection

Encountering issues with fs.readFileSync when used within a template literal

Creating a custom directive in Angular that dynamically applies attributes based on the current route

Angular6 returns the result after subscribing to an HTTP POST request

There is an issue with the Angular Delete request functionality, however, Postman appears to be

Creating a unique abstract element for cycling through a collection

Encountered an issue with the node-mssql error message while attempting a bulk insert: "A premature end-of-message was encountered while reading the current row from the host."

What is the process for integrating Mocha into a create-react-app project that uses Typescript?

The BeanStub initialization failed due to a missing bean reference to frameworkOverrides

Steps to perform a task that relies on two observables

Retrieve a specific key from a TypeScript interface

Troubleshooting: Angular 2 ngIf not functioning properly when using properties in extended classes

Is it true that core JavaScript is not compatible with AngularJS projects?

When evaluating objects or arrays of objects to determine modifications

The element 'flat' is not found within the specified type

Utilizing import for Ionic3 to export const with logic

Encountering a TypeScript issue with bracket notation in template literals

Propagation of data within singleton services

What steps can be taken to troubleshoot the error message "InjectionToken angularfire2.app.options! not found" during testing of Firestore in Angular?