The Progress Bar Web Control creates a bar of progressive steps that a user will go through. It allows for a dynamic number of steps, customizing the look and feel, step labels, and navigation.

Propeties

General

Value

Expects type number.

Defines the number of the step that should be highlighted as the current step in the Progress Bar. All the proceeding steps will change to their "completed" state when this value changes.

📘

Unlike in some other indexing cases, step count begins with 1, not 0.

Steps

Expects type number.

Displays the number of steps to be rendered in the Progress Bar. Each step will have a marker as both a click target and be able to have a label specified if desired.

Progress Labels

Expects type list.

Displays the description of the steps as an array of text values. For example:

[  
  "Personal Info",  
  "Home Info",  
  "Insurance",  
  "Contact"  
]

Accessibility

Aria Label

Expects type text.

The aria-label attribute is used to define a string that labels the current element. It is used to provide an accessible name for the control. For more information see here.

State

Is Visible

Expects type boolean.

If TRUE the control will be visible. If FALSE the control will not be displayed. If the field is empty, the control will be visible.

Is Disabled

Expects type boolean.

If TRUE the control will be disabled and the user will not be able to interact with it. If FALSE the control will be enabled. If the field is empty, the control will be enabled.

Style

The Progress Bar is a compound control and it is possible to change the style of the sub-controls within it. Check Common style properties of web controls for details on how to style this Web Control.

Actions

Value Changed

This event is run each time the Progress Bar steps change.

Metadata about this event can be accessed through the event namespace.

Example

Here's an example on how to change the size and color of the labels of a progress bar