I implemented a progress bar but I'm having problems.

The progress bar to complete should take 5 seconds. My problem is that the value is updated from second to second and I would like it to be continuous, without any kind of stops.

DEMO

HTML

<dx-progress-bar
#progressBar
[showStatus]="false"
id="progress-bar-status"
[rtlEnabled]="true"
[class.complete]="progressBar.value == maxValue"
[min]="0"
[max]="maxValue"
[value]="maxValue - seconds"
>
</dx-progress-bar>

.Ts

 seconds = 5;
  maxValue = 5;
  intervalId: number;

  onButtonClick() {
    this.seconds = 5;
    this.intervalId = window.setInterval(() => this.timer(), 1000);
  }

  timer() {
    this.seconds--;
    if (this.seconds == 0) {
      clearInterval(this.intervalId);
    }
  }

intended result

Example

CodePudding user response：

Notice how dx-trackbar-range has transition none via inline styles. If you can't change it using component API, you can change it directly on your CSS file:

.dx-trackbar-range {
  transition: width 3s ease-in-out !important;
}

working example: https://stackblitz.com/edit/angular-devextreme-sandbox-4xzbua?file=src/styles.css

CodePudding user response：

The timer function is run every second, so running it every animation frame should work:

   seconds = 5;
   maxValue = 5;
   lastFrame = undefined;
   intervalId: number;
    
   onButtonClick() {
     this.seconds = 5;
     this.intervalId = window.requestAnimationFrame(this.timer);
   }
    
   timer(time) {
     if (this.lastFrame == undefined) {
       this.lastFrame = time;
     }
     this.seconds -= (time - this.lastFrame);
     this.lastFrame = time;
     if (this.seconds > 0) {
       this.intervalId = window.requestAnimationFrame(this.timer);
     }
   }