The principle of the progress bar is very simple, that is to change the width, height, or fill ratio of a component according to the progress. There are two types of progress bars, horizontal and vertical.

Create progressbar

There are two ways to create a progress bar component.

Edit-mode properties

In the component editing state, the properties panel of the progress bar component is:


You can use the relation to make a richer progress bar component. For example, the following progress bar, the moving squirrel establishes an relation with the bar component “right-> right”, so when the progress changes, the squirrel also follows Already.

Instance properties

Select a progress bar component on the stage, and the property panel list on the right appears:


GProgressBar pb = gcom.GetChild ("n1").asProgress;
    pb.value = 50;
    // If you want to change the progress value, there is a dynamic process
    pb.TweenValue (50, 0.5f);