ProgressBar Demo

The ProgressBar is one of the simplest components. It has progress and max properties. Setting either one of them will update the bar to show the percentage of progress in relation to the maximum. You can set these two properties with actual values, or normalize them by setting max to 1 and computing progress as a fraction of your actual progress and maximum value.

In this demo, the code calculates the distance the mouse has travelled each time you move it. The goal is 100,000 pixels, which is assigned to max and the current distance is assigned to progress. When you meet the goal, progress returns to zero.