Angular Material 2: Jerky Animation of Progress Bars

Question

Angular Material 2: Jerky Animation of Progress Bars

I am currently developing a page using Angular that includes multiple progress bars indicating the progress made for actions that have specific durations. My goal is to utilize the Angular Material progress bar to create a seamless animation from start time to end time. I have implemented a method where I update the percentage of completion every 50ms and assign this value to the progress bar, as demonstrated in the code snippet below:

const start = new Date().getTime();
const source = timer(0, 50);
const subscribe = source.subscribe(() => {
  const time = new Date().getTime();
  if (time - start > length) {
    subscribe.unsubscribe();
  }

  this.progressValue = 100 * (time - start) / length;
});

Here is the HTML code for the progress bar itself:

<mat-progress-bar mode="determinant" [value]="progressValue"></mat-progress-bar>

However, the progression of the progress bar appears choppy. Are there any alternative methods to achieve a smoother transition? Since the duration of the process is known each time, I believe achieving a smooth progression for that specified time should be straightforward. Thank you!

angular typescript animation

Answer 1

Answer №1

Here is my solution:

Below is the HTML code snippet:

<mat-progress-bar color="accent" mode="determinate" [value]="uploadPercentage$ | async"></mat-progress-bar>

This is how the component looks like:

@ViewChild(MatProgressBar) progressBar: MatProgressBar;
uploadPercentage$: Observable<number>;
uploadProgress$: Subject<HttpProgressEvent> = new Subject<HttpProgressEvent>();

ngAfterViewInit(): void {
    // Wait for the animation to end before changing value
    this.uploadPercentage$ = this.progressBar.animationEnd
      .pipe(
        startWith({
          value: 0
        }),
        switchMap((animationState: ProgressAnimationEnd) => this.uploadProgress$
          .pipe(
            map((progress: HttpProgressEvent): number => this.progressToPercents(progress)),
            distinctUntilChanged((val: number) => animationState.value !== val)
          )
        ),
      );
  }

Answer 2

Here is my solution:

Below is the HTML code snippet:

<mat-progress-bar color="accent" mode="determinate" [value]="uploadPercentage$ | async"></mat-progress-bar>

This is how the component looks like:

@ViewChild(MatProgressBar) progressBar: MatProgressBar;
uploadPercentage$: Observable<number>;
uploadProgress$: Subject<HttpProgressEvent> = new Subject<HttpProgressEvent>();

ngAfterViewInit(): void {
    // Wait for the animation to end before changing value
    this.uploadPercentage$ = this.progressBar.animationEnd
      .pipe(
        startWith({
          value: 0
        }),
        switchMap((animationState: ProgressAnimationEnd) => this.uploadProgress$
          .pipe(
            map((progress: HttpProgressEvent): number => this.progressToPercents(progress)),
            distinctUntilChanged((val: number) => animationState.value !== val)
          )
        ),
      );
  }

Answer 3

Answer №2

I have successfully implemented a custom progress bar using Angular Animations. The transition is seamless and resembles the appearance of mat-progress-bar:

1) Incorporate Animations into your component:

  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss'],
  animations: [
    trigger('loading', [
      state('start',
        style({
          width: '0%'
        })
      ),
      state('end',
        style({
          width: '100%'
        })),

      transition('start => end', [
        animate(2000)
      ]),
    ])
  ]
})

2) Set a timer to trigger the animation. I close the dialog once the progress is complete:

duration: number = 2 * 100;
step = 100;
add_step = 10;
progress = 0;


ngOnInit() {
    const interval = setInterval(() => {
      if (this.progress < this.duration) {
        this.progress += this.add_step ;
      } else {
        clearInterval(interval);
        this.dialogRef.close();
      }
    }, this.step);
  }

3) Implement it in the HTML:

<div style="background-color: #ff7a7a;height: 4px;width: 100%;">
        <div style="background-color: #760000;height: 4px;"
             [@loading]="progress === 0 ? 'start':'end'">
        </div>
</div>

Answer 4

I have successfully implemented a custom progress bar using Angular Animations. The transition is seamless and resembles the appearance of mat-progress-bar:

1) Incorporate Animations into your component:

  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss'],
  animations: [
    trigger('loading', [
      state('start',
        style({
          width: '0%'
        })
      ),
      state('end',
        style({
          width: '100%'
        })),

      transition('start => end', [
        animate(2000)
      ]),
    ])
  ]
})

2) Set a timer to trigger the animation. I close the dialog once the progress is complete:

duration: number = 2 * 100;
step = 100;
add_step = 10;
progress = 0;


ngOnInit() {
    const interval = setInterval(() => {
      if (this.progress < this.duration) {
        this.progress += this.add_step ;
      } else {
        clearInterval(interval);
        this.dialogRef.close();
      }
    }, this.step);
  }

3) Implement it in the HTML:

<div style="background-color: #ff7a7a;height: 4px;width: 100%;">
        <div style="background-color: #760000;height: 4px;"
             [@loading]="progress === 0 ? 'start':'end'">
        </div>
</div>

Answer 5

Answer №3

Here is a simplified version of Nodarii's answer:

HTML:

<mat-progress-bar color="accent" mode="determinate" [value]="uploadPercentage$ | async"></mat-progress-bar>

Component:

@ViewChild(MatProgressBar) progressBar: MatProgressBar;
uploadPercentage$: Observable<number>;

ngAfterViewInit(): void {
    this.uploadPercentage$ = this.progressBar.animationEnd.pipe(
        startWith(0),
        delay(0),
        map(() => this.yourPercentage)
    );
}

Let Angular Material handle the animation for you ;)

Answer 6

Here is a simplified version of Nodarii's answer:

HTML:

<mat-progress-bar color="accent" mode="determinate" [value]="uploadPercentage$ | async"></mat-progress-bar>

Component:

@ViewChild(MatProgressBar) progressBar: MatProgressBar;
uploadPercentage$: Observable<number>;

ngAfterViewInit(): void {
    this.uploadPercentage$ = this.progressBar.animationEnd.pipe(
        startWith(0),
        delay(0),
        map(() => this.yourPercentage)
    );
}

Let Angular Material handle the animation for you ;)

Angular Material 2: Jerky Animation of Progress Bars

Answer №1

Answer №2

Answer №3

Similar questions

The ngTemplateOutletContext context source is not defined

Is the Angular Tutorial's use of the In-memory Web API conforming to the appropriate PUT semantics?

Angular/Bootstrap Card Components

Angular Form Validations - input values must not match the initial values

The field '_id' is not present in the type Pick

Implement the properties encapsulation design pattern

Populate an array of objects with time values up to 24 hours ago

Angular problem: Cannot connect to 'formGroup' as it is not a recognized property of 'form'

Ways to implement logging in an NPM package without the need for a specific logging library

Creating motion in recently added elements using varied keyframe settings

nginx error when trying to navigate angular routes

In Angular code, the foreach loop jumps to the next function before completing each iteration of the loop

There was an issue encountered when executing Angular in Cypress: The module '@angular/compiler' is not found

In Typescript, object strings can be enforced to be used from the parent object similar to

Dynamic property name construction in typescript: dynamically creating property names on types

Trigger the component to emit an event once all validators have been cleared

Angular's NavigationEnd event is triggered prior to the resolution of data for the subsequent page

Angular5 encountered a problem with the ngx-bootstrap DatePicker when handling DateTime objects

What is the proper way to effectively utilize modules in Angular?

Tips for ensuring session token verification remains intact upon reloading