CODEWITHSUNDEEP
htmlprogress-barangular5web-component
Giamma
Giamma

Reputation: 837

Angular5 animated progress bar

I have started learning angular 5 two weeks ago and I want to practice on html event. Previously I used jquery for years so I need a little help. What i want to do can be divided in two steps: 1) animate a progress bar from 0 to a n value between 0 and 100; 2) execute the method of point 1 when the progress bar appears on screen after scrolling.

I spent my morning searching a solution but I didn't find anything. Can someone help me?

Thanks

Upvotes: 1

Views: 6220

Answers (1)

Nolan Walker
Nolan Walker

Reputation: 352

I suggest installing ngx-bootstrap and ngx-scroll-event via npm. Then play around with the settings and numbers until your liking. I'll provide what I got from just playing around with some of the stuff.

app.component.ts

import { Component } from '@angular/core';
import { ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { ScrollEvent } from 'ngx-scroll-event';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [{ provide: ProgressbarConfig, useFactory: getProgressbarConfig }]
})
export class AppComponent {
  public max = 100;
  public progress = 20;

  public changeProgress(event: ScrollEvent, value: number, current: number): void {
      this.progress = value;
  }

}

export function getProgressbarConfig(): ProgressbarConfig {
  return Object.assign(new ProgressbarConfig(), { animate: true, striped: true max: 100 });
}

app.componenet.html

<div style="height:1000px"></div>

<div style="height: 500px" detect-scroll (onScroll)="changeProgress($event, 70, progress)" [bottomOffset]="200" [topOffset]="200">
  <div class="mb-2">
    <progressbar class="progress-striped active"  [value]="progress" [max]="100" type="success"> {{progress}} / {{max}}</progressbar>
  </div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollEventModule,
    ProgressbarModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 2

Related Questions