# Progress Bar

## Purpose

The lowcodera progress bar component can be used to visualize the progress of a task or activity. The progress bar can also be used to inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="236">Control Property</th><th width="194">Description</th><th width="150">Required</th><th width="168">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>BarLabel</td><td>Property to set bar label.</td><td>X</td><td>String</td></tr><tr><td>Label</td><td>Property to set up Progressbar's title</td><td>X</td><td>String</td></tr><tr><td>Theme</td><td>Property to set theme for progress bar.</td><td>X</td><td><p>Danger</p><p>Default</p><p>Info</p><p>Primary</p><p>Secondary</p><p>Success</p><p>Warning</p></td></tr><tr><td>CustomColor</td><td>Property to set custom color for progress bar</td><td>X</td><td>String (HEX CODE in Upper Case) (e.g #E4501B)</td></tr><tr><td>Stripped</td><td>Property to allow stripe within the proress bar</td><td>X</td><td>Boolean</td></tr><tr><td>Animated</td><td>Property to show animation effect with stripe in progress bar.</td><td>X</td><td>Boolean</td></tr><tr><td>ShowPercentage</td><td>Property to show progress of progress bar in percentage</td><td>X</td><td>Boolean</td></tr><tr><td>ShowPercentageOnBar</td><td>Property to show progress of progress bar on bar</td><td>X</td><td>Boolean</td></tr><tr><td>MaximumValue</td><td>Property to set Maximum limit for pogress bar</td><td>Yes</td><td>Numeric</td></tr><tr><td>CurrentValue</td><td>Property to set current value for the progress bar</td><td>Yes</td><td>Numeric</td></tr></tbody></table>

## Example

### Simple Progress Bar

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2Fot4ODR23GAddVwQw3NEF%2Fimage.png?alt=media\&token=f483ccc6-b76d-4d0e-8a0e-8ea8cd490a1a)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `CustomColor` property is to set as **#E4501B**
* [x] `MaximumValue` is to set as **100**
* [x] `CurrentValue` is to set as **34**
  {% endtab %}
  {% endtabs %}

###