Continuous Advancement Meter

Question

Continuous Advancement Meter

I have implemented a progress bar, but I am encountering some issues with it.

The progress bar is supposed to complete in 5 seconds. However, the value updates every second rather than continuously, causing it to pause intermittently.

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

javascript angular typescript devextreme

Answer 1

Answer №1

Take note of how the dx-trackbar-range element has a transition of none set through inline styles. If you are unable to modify it using the component API, you can make the change directly in your CSS file:

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

See a working example here: https://stackblitz.com/edit/angular-devextreme-sandbox-4xzbua?file=src%2Fstyles.css

Answer 2

Take note of how the dx-trackbar-range element has a transition of none set through inline styles. If you are unable to modify it using the component API, you can make the change directly in your CSS file:

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

See a working example here: https://stackblitz.com/edit/angular-devextreme-sandbox-4xzbua?file=src%2Fstyles.css

Answer 3

Answer №2

To ensure that the timer function runs smoothly, it is recommended to execute it every animation frame for optimal performance:

   let seconds = 5;
   let maxValue = 5;
   let lastFrame = undefined;
   let 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);
     }
   }

Answer 4

To ensure that the timer function runs smoothly, it is recommended to execute it every animation frame for optimal performance:

   let seconds = 5;
   let maxValue = 5;
   let lastFrame = undefined;
   let 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);
     }
   }

Continuous Advancement Meter

Answer №1

Answer №2

Similar questions

Pressing the tab key makes all placeholders vanish

What is the best way to trigger an ajax request when a user selects a tab?

The object is given a value in the form of a string, even though it is a strongly-typed variable

Requesting with the '&' symbol (amp)

Forward to a task with a unique identifier obtained through asynchronous JavaScript calls

Is there a way to detect the completion of the fadeout animation before calling a function?

Acquire the HTML code, make substitutions, and save it as a string variable without altering the DOM element

Testing the output of a directive in a component unit test by simulation

My authentication process involves utilizing auth0 for verifying users, coupled with an API designed for creating, reading, updating, and deleting posts which include fields for titles, images, and descriptions. What steps should be

What causes JavaScript image to stop loading while displaying a prompt dialog?

What is the method for triggering the output of a function's value with specified parameters by clicking in an HTML

When working with Sequelize querying, the response is showing an error indicating a column that does

Outdated JavaScript Alert

Group objects with the same id in an array into separate arrays

Encountered a mysterious "Karma - Unknown provider" issue relating to the menuFactoryProvider and menuFactory

On mobile devices, the code "location.assign(url)" may occasionally redirect to an incorrect URL, despite functioning correctly in the majority of instances

Tips on incorporating JavaScript files into Angular applications

JS and MUI are combining forces to create a dynamic background change on the page when selecting items from a dropdown menu

Updating Information Using JQuery

Invoking a jQuery request to a C# API endpoint