A progress bar provides a graphical representation of an ongoing event that is expected to terminate at some point in time. Although this means of progress representation does not provide a numerical value to the user, it gives a very good indication of the progress in a form that is intuitive to read.

This tutorial demonstrates the use of the progress bar with a button as an event generator to update the progress.

Start LiveCode and create a new stack by selecting New stack from the File menu. Then drag and drop a button (1) and a progress bar on to the card (2). Right click on the progress bar and select the Property Inspector (3). Make sure that the Basic Properties have been selected in the tabs. You can update the End value and the Current value of the progress bar. Set the end value to 10 (4) and the Current value to something between 0 and 10 (5).

Once you have created and updated the controls, add code to the button. Open the script editor by right clicking on the button and select Edit Script. Then paste the following code into the script editor.

on mouseUp
   // Create a progress variable for the current progress value.
   local tCurrentProgress

   // Get the current progress value and assign it to the progress variable.
   put the thumbPosition of scrollbar "Progress Scrollbar" into tCurrentProgress

   // Test if the progress variable value is greater than the end value of the
   // progress bar.
   if tCurrentProgress >= the endValue of scrollbar "Progress Scrollbar" then
      // If the progress variable is greater or equal to the end value of the
      // progress bar, then set the progress variable to 0.
      put 0 into tCurrentProgress
   else
      // If the current progress is not greater or equal to the end value of 
      // the progress bar, then add 1 to the progress variable.
      add 1 to tCurrentProgress
   end if

   // Set the progress position of the progress bar to the value of the 
   // progress variable.
   set the thumbPosition of scrollbar "Progress Scrollbar" to tCurrentProgress
end mouseUp

This code creates the variable tCurrentProgress and populates it with the progress value from the progress bar. If the value in the tCurrentProgress is greater or equal to the end value of the progress bar then the tCurrentProgress is reset to 0. If the variable value is not greater or equal to the end value of the progress bar then 1 is added to the tCurrentProgress. After the if condition, the progress bar is updated and the variable value is assigned to the progress bar.

You can update how many times the button has to be pressed to complete an entire progress update cycle by modifying the end value and current value of the progress bar.

Test the progress bar by switching to run mode and clicking the button. You should see that progress increases with each button click, until the progress bar reaches the end of the progress display. Continued clicks on the button cause the progress bar to reset and progress to start from the beginning.

If you found this example useful but would like to know how to use the progress bar in an environment where it is automatically updated, then have a look at lesson: How do I use a Progress Bar?