Progress Bar in angular using devextreme

Progress Bar :

The progression of a lengthy computer process, such as a download, file transfer, or installation, is visualised using a progress bar, which is a graphical control element. On occasion, a written depiction of the progress in % format is included with the visual.

properties :

Min : This property set min range.

Max : This property set max range.

value : This property specifies the current value.

When the ProgressBar reaches the maximum value, the complete event occurs. Use the onComplete function to handle it.

The progress status illustrates the progress by showing a ratio between the current and maximum values. The status string can be shown or hidden by using the showStatus attribute. Use the function statusFormat to format the status string.

<div class="form">
  <dx-button
    id="progress-button"
    [(text)]="buttonText"
    (onClick)="onButtonClick()"
    [width]="200"
  >
  </dx-button>
  <div class="progress-info"> Time left {{ seconds | time }} </div>
  <dx-progress-bar
    #progressBar
    id="progress-bar-status"
    width="90%"
    [class.complete]="progressBar.value == maxValue"
    [min]="0"
    [max]="maxValue"
    [statusFormat]="format"
    [value]="maxValue - seconds"
  >
  </dx-progress-bar>
</div>

import {
  NgModule, Component, Pipe, PipeTransform, enableProdMode,
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxButtonModule, DxProgressBarModule } from 'devextreme-angular';

@Pipe({ name: 'time' })
export class TimePipe implements PipeTransform {
  transform(value: number): string {
    return `00:00:${(`0${value}`).slice(-2)}`;
  }
}

if (!/localhost/.test(document.location.host)) {
  enableProdMode();
}

@Component({
  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css'],
})
export class AppComponent {
  buttonText = 'Start progress';

  inProgress = false;

  seconds = 10;

  maxValue = 10;

  intervalId: number;

  onButtonClick() {
    if (this.inProgress) {
      this.buttonText = 'Continue progress';
      clearInterval(this.intervalId);
    } else {
      this.buttonText = 'Stop progress';

      if (this.seconds === 0) {
        this.seconds = 10;
      }

      this.intervalId = window.setInterval(() => this.timer(), 1000);
    }
    this.inProgress = !this.inProgress;
  }

  timer() {
    this.seconds--;
    if (this.seconds == 0) {
      this.buttonText = 'Restart progress';
      this.inProgress = !this.inProgress;
      clearInterval(this.intervalId);
    }
  }

  format(ratio) {
    return `Loading: ${ratio * 100}%`;
  }
}

@NgModule({
  imports: [
    BrowserModule,
    DxButtonModule,
    DxProgressBarModule,
  ],
  declarations: [AppComponent, TimePipe],
  bootstrap: [AppComponent],
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);