> For the complete documentation index, see [llms.txt](https://doc.sysdevmobile.com/kalipso/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.sysdevmobile.com/kalipso/6.0/documentation/controls/type/progress-bar.md).

# Progress Bar

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2F6EXt5iNEqgh5NKITClIJ%2FProgressBar.png?alt=media&amp;token=5de3c6ef-ba43-447b-b86e-fc5ef7b70e63" alt="icon"><figcaption></figcaption></figure>

A Progress Bar is a visual indicator that displays the progress of a task or operation. It shows how much of a process has been completed, typically as a percentage or value between a minimum and maximum. You can update the Progress Bar's value in runtime to reflect the current progress of an operation. A Progress Bar can interact with the user through its Events. You should use this Control when you want to provide visual feedback to the user about the completion status of a task.

**Value -** Its value represents the current progress, which is a numeric value between the minimum and maximum values.

For the control in question, when opening its properties, the following window appears:

{% hint style="info" %}
Depending on the control chosen, the properties are different.
{% endhint %}

### Properties

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2FFhkQuMMUI8SDKfvS5iZm%2Fimage.png?alt=media&amp;token=b3b0ef71-fc77-47f4-ba3f-238f6b1be998" alt=""><figcaption></figcaption></figure>

### **Tab - General**

**Common**

* **Name** - Name of the Control. This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (\_).
* **Default Value** - Default value of the Progress Bar (0-100 or between Min/Max values). This is the initial value of the Progress Bar.
* **Description** - *Not applicable to this control.*
* **Plane** - Plane of the Form where the Control should be created. Check the [Planes ](/kalipso/6.0/documentation/form/planes.md)chapter for more information.
* **Visible** - With this option selected, the control is (or is not) visible.
* **Enabled** - With this option selected, the control is (or is not) enabled. It may be visible (previous option), but it may not be enabled. In this case an event associated with the control is not executed.

**Layout**

* **X** - x position of the Control from left
* **Y** - y position of the Control from top
* **Width** - Width of the Control.
* **Height** - Height of the Control

{% hint style="info" %}
In relation to all these layout options, it is possible to set this value in runtime via the "[**Set Property**](/kalipso/6.0/documentation/actions/group-controls/set-property.md)" Action. You can also retrieve this value in runtime via the "[**Get Property**](/kalipso/6.0/documentation/actions/group-controls/get-property.md)" Action.
{% endhint %}

**Miscellaneous**

* **Max Value** - The maximum value of the Progress Bar. This defines the upper limit of the progress range. Ex: 100.
* **Min Value** - The minimum value of the Progress Bar. This defines the lower limit of the progress range. Ex: 0.
* **Indicator State** - Determines how the Progress Bar displays progress:
  * **Determinate** - Shows a specific progress value between Min and Max values. The bar fills proportionally based on the current value.
  * **Indeterminate** - Shows an animated progress indicator when the progress amount is unknown. The bar displays a continuous animation to indicate that a process is ongoing without showing a specific completion percentage.

**Appearance**

* **Background** - Background color of the Control. You can set the color for the background.
* **Opacity** - Set the percentage of opacity for the background (0-100%).
* **Rotation** - Rotation angle of the Control in degrees.

{% hint style="info" %}
You can set these values in runtime via the "[**Set Property**](/kalipso/6.0/documentation/actions/group-controls/set-property.md)" Action. You can retrieve these values in runtime via the "[**Get Property**](/kalipso/6.0/documentation/actions/group-controls/get-property.md)" Action.
{% endhint %}

**Bar**

* **Type** - The type/orientation of the Progress Bar:
  * **Linear** - The bar fills horizontally from left to right as progress increases.
  * **Circular** - The progress is displayed as a circular/radial indicator that fills around the circumference as the value increases from minimum to maximum.
* **Thickness** - The height/thickness of the progress bar fill line.
* **Background** - The background color of the bar track (the unfilled portion of the progress bar).
* **Fill** - The color of the fill indicator (the portion showing completed progress). Choose from predefined colors or system themes.

**Border**

* **Border** - To set or remove the frame around the Control. When choosing this option, the application allows the following types of border:
  * **None** - No border is displayed around the Control.
  * **Default** - A frame is displayed around the Control with default styling.

{% hint style="info" %}
You can activate or deactivate the Border through "Set Property" Action. You can know if it's active or not in runtime via the "Get Property" Action.
{% endhint %}

### **Tab - Actions**

<figure><img src="https://1102213384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM6Wz3tBjSWbCweZ8NltT%2Fuploads%2FluwO20FivxIw8mVKOgJ2%2Fimage.png?alt=media&amp;token=8cd79189-e4fd-4438-bfa7-865f547c558e" alt=""><figcaption></figcaption></figure>

For each control, actions can be associated. For this, with the control selected, it is possible to access this tab and associate an action to the control. For more information on the actions available and how to use them click [**here**](/kalipso/6.0/documentation/form/actions.md).

The Progress Bar control supports the following events:

* **Click** - Triggered when the user clicks on the Progress Bar.
* **Right Click / Tap and Hold** - Triggered when the user right-clicks or performs a long tap on the Progress Bar (typically on touch devices).

#### Shortcuts

* F2 - Actions
* F3 - General Properties