Skip to main content

Progress Bar

The Horizontal Progress Bar component displays progress in a linear bar format, ideal for visualizing task completion, file uploads, or any process with a defined start and end point.

Example Usage​

A project management dashboard needs to display task completion status for multiple projects. Using the Horizontal Progress Bar component, each project shows its completion percentage with a visual bar that fills from left to right, changing color when the task reaches 100% completion.

Properties​

Property
Description
Expected Value
LabelSets how the progress label is displayed.Select Auto to show the progress percentage, or select Custom to display custom text.
TextCustom text to display as the label. Only visible when Label is set to Custom.String (e.g., Loading files...).
ProgressSets the progress value of the component. Values are clamped between 0 and 100.Number (e.g., 50).
info

Any property having fx button next to its field can be programmatically configured.

Component Specific Actions (CSA)​

The following actions of the component can be controlled using the component-specific actions (CSA). You can trigger these using an event or through a RunJS query.

Action
Description
How To Access
setValueSets the progress value of the component. Values are automatically clamped between 0-100.components.progressbar1.setValue(75)
setVisibilitySets the visibility of the component.components.progressbar1.setVisibility(false)

Exposed Variables​

VariableDescriptionHow To Access
valueHolds the current progress value of the component (0-100).{{components.progressbar1.value}}
isVisibleIndicates if the component is visible.{{components.progressbar1.isVisible}}

Additional Actions​

Action
Description
Configuration Options
VisibilityControls component visibility.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
TooltipProvides additional information on hover.String (e.g., Task completion status).

Devices​

Property
Description
Expected Value
Show on desktopMakes the component visible in desktop view.You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobileMakes the component visible in mobile view.You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles​

Label​

Property
Description
Configuration Options
ColorSets the text color of the label.Select the color or click on fx and input code that programmatically returns a Hex color code.
SizeSets the font size of the label text.Enter a value or use the slider.
AlignmentSets the position of the label relative to the progress bar.Select side to place the label beside the bar, or top to place it above the bar.
WidthSets the width of the label area when alignment is set to side.Enable Auto width to use the standard width automatically, or disable it to manually adjust using the slider.

Progress Bar​

Property
Description
Configuration Options
TrackSets the background color of the progress bar track.Select a color or click on fx and input code that programmatically returns a Hex color code.
Progress trackSets the color of the filled progress portion.Select a color or click on fx and input code that programmatically returns a Hex color code.
CompletionSets the color displayed when progress reaches 100%.Select a color or click on fx and input code that programmatically returns a Hex color code.
Progress bar widthSets the height/thickness of the progress bar.Enter a value or use the slider.

Container​

Property
Description
Configuration Options
Box shadowSets the box shadow properties of the component.Select the box shadow color and adjust the related properties or set it programmatically using fx.
PaddingAdds padding between the component and its container boundary.Select Default for standard padding or None to remove padding.

Need Help?​