The ProgressBar is one of the simplest components. It has
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
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.