Using Progress Bars

This tutorial describes how to implement a progress bar, updating the status each time a button is pressed.


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.

Dragging and Dropping the Controls

Start LiveCode and create a new stack by selecting New Mainstack from the File menu. Then drag and drop a button onto the card (1). Then drag and drop a progress bar on to the card (2). These are all the controls needed. Once these controls have been added, right click on the progress bar and select the Property Inspector (3). Make sure that the Basic Properties have been selected in the drop down menu. You have to update the End value and the Current value of the progress bar, otherwise this example would take quite a while to complete. The default value for End value is 65536. Set the end value to 10 (4) and the Current value to something between 0 and 10 (5).

Adding the Code

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


// 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.

Progress in Operation

Test the progress bar by 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 star from the beginning.

Further Reading

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?


Add your comment

E-Mail me when someone replies to this comment