# Countdown - Progress

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

The countdown component enables a visual representation of progress.

![Illustration 1. Appearance of the countdown component in the application](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-90d898f24f43dfc6c05c1cbd0dad9fa419b5bab5%2Fprogress1.png?alt=media)

✅ **When to use:**

* You need to show the remaining time to complete a step or indicate the waiting time for a system action.

:x: **When not to use:**

* The action is not time-limited, and you only want to show the progress of the application flow. **Use**: the "Step visibility" option in the [Properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/tworzenie-formularza/wlasciwosci-formularza#widoczność-kroków) tab of the form.

### Component properties

| Eximee Designer property                          | Attribute name in Source | Description                                                                                                                                                                        |
| ------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Label (key)**                                   | labelKey                 | The key from the label dictionary that determines the displayed name (title) of the component.                                                                                     |
| **Label position**                                | labelPosition            | Specifies the position of the description relative to the progress bar. The value `ABOVE_LINE` means displaying the label above the bar line.                                      |
| **Direction** (section **Basic properties**)      | directionOfProgress      | Specifies the direction of the bar's progress. Available options: **Left to right** (value increases) and **Right to left** (value decreases).                                     |
| **Display mode** (section **Basic properties**)   | displayMode              | Specifies how information about the progress status is presented. Options: **Time** (minutes and seconds), **Percentage** (%) and **None**. Default: "Time (minutes and seconds)". |
| **Max time** (section **Basic properties**)       | duration                 | Specifies the total time (in seconds) required for the progress bar to fully "load". Default: 60.                                                                                  |
| **Step \[s]** (section **Basic properties**)      | valueUpdateInterval      | Specifies the time interval (in seconds) at which the bar is visually updated. Default: 1.                                                                                         |
| **Auto-save \[s]** (section **Basic properties**) | valueSaveInterval        | Specifies the frequency (in seconds) at which the component saves its current value to the server. Default: 1.                                                                     |

> More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

<br>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-9dbf0c63ee00cd4f84c2f5a473b8aa9d896bfa02%2Fprogress3.png?alt=media" alt=""><figcaption><p><em><strong>Figure 1.</strong> Example appearance of the component.</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-d93ecf9fca30695a52324d864000e4dd8688b73b%2Fprogress2.png?alt=media" alt=""><figcaption><p><em><strong>Figure 2.</strong> Example component properties.</em></p></figcaption></figure>
