Control speed of a progress bar

This is probably a strange request.

But I have a ‘progress’ bar that indicates time taken for a task based on the the power of a device setting. On default ‘mid’ the progress bar takes 15 seconds. However, the user can either increase the power (doubling the speed) or decrease the power (halving the speed) of the device which affects the speed of the progress bar. The problem is that halfway through the progress the user can change between the settings thus increasing and decreasing progress speed on the fly.

Can anyone give me some pointers how to build this?

Hi, ghowarth. The key is to build an interaction that increments the bar gradually and is interruptible when a different button is pressed.

  • Whenever the text in the text field changes, it sets the width of the bar to that number.
  • Each of the three buttons increments the value in the text field by a different amount and at different intervals.
  • A button keeps looping and incrementing until either another button is clicked or the bar is as long as the empty rectangle.

You can change the width of the empty rectangle to the size you want and the bar will keep growing. I fiddled with the wait times and the size of the increments (size.width / n) to try to get a reasonably smooth animation with approximately the right speeds, but if you change the size you might want to fiddle with them more.

You can hide the incrementer text field; I just left it visible so you could see what was going on. You could also hide the empty size rectangle (or style it to remove the border); it’s just there so the loop on the button knows when to stop growing the bar.


progress bar.rp (53.4 KB)



Thank you so much. That is an absolutely brilliant solution and I’ve learned something new from this that I can apply to other areas. Hope others also find this solution as informative as I do.

Best regards,

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.