Progress bar

The Progress bar object displays a bar which can be used to indicate the progress of a long-running operation or goal.

A progress bar

The progress bar is styled differently depending on the platform or browser, designed to match the style of the system. If a custom style is desired, it may instead be preferable to use a Tiled Background which has its width set depending on the progress.

HTML elements display on top

Most objects like Sprite draw on to a <canvas> element, which displays like a large image. Objects like Progress Bar are in fact HTML elements placed on top of the canvas rather than drawn on the canvas. Therefore, nothing can be displayed on top of it apart from other HTML elements. Using layers and Z order to adjust their layering inside Construct will have no effect.

Progress bar properties

The initial progress display to show, from 0 to the maximum.
The maximum progress value, at which point the progress bar is shown full indicating a completed operation.
An optional tooltip to show while hovering the mouse over the control.
Initially visibile
Whether the control is initially visible or invisible in the page.
ID Optional
An optional id attribute for the element in the DOM (Document Object Model). This can be useful for CSS styling.
Class Optional
An optional class attribute for the element in the DOM (Document Object Model). This can be useful for CSS styling.

Progress bar conditions

See common conditions for features shared between form control objects.

Compare progress
Compare the currently set progress amount.
On clicked
Triggered when the progress bar control is clicked.

Progress bar actions

See common actions for features shared between form control objects.

Make indeterminate
Set the progress bar in to an indeterminate mode, intended to indicate that it is working, but the progress is unknown. The display of this mode depends on the browser and platform. Not all browsers may support an indeterminate mode for progress bars.
Set maximum
Set the maximum progress value for the progress bar.
Set progress
Set the current progress value displayed by the progress bar, from 0 to the maximum.
Set tooltip
Set the tooltip that appears when the mouse hovers over the control.

Progress bar expressions

The currently set maximum progress value.
The currently set progress amount, if the bar is not in indeterminate mode.
Construct 3 Manual 2022-05-04