> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/nawigacja/odliczanie.md).

# Countdown - Progress

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

The countdown component enables a visual representation of progress.

![](/files/82bfbb8115abb8e0fa9cf619fe383ad35438a35c)

✅ **When to use:**

* You need to present the time remaining 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 request processing. **Use**: the "Step visibility" option in the tab [Properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/nawigacja/pages/b9254d797e03363b58a0f5522b4741960d18d11a#widoczność-kroków) form.

### Component properties

| Eximee Designer property                          | Attribute name in Source | Description                                                                                                                                                            |
| ------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Label (key)**                                   | labelKey                 | A key from the label dictionary responsible for the displayed name (title) of the component.                                                                           |
| **Label position**                                | labelPosition            | Defines 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      | Defines 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              | Defines how progress status information is presented. Options: **Time** (minutes and seconds), **Percentage** (%) and **None**. Default: "Time (minutes and seconds)". |
| **Max time** (section **Basic properties**)       | duration                 | Defines the total time (in seconds) needed for the progress bar to fully "load". Default: 60.                                                                          |
| **Step \[s]** (section **Basic properties**)      | valueUpdateInterval      | Defines the time interval (in seconds) at which the bar is visually updated. Default: 1.                                                                               |
| **Auto-save \[s]** (section **Basic properties**) | valueSaveInterval        | Defines 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](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

<br>

<figure><img src="/files/9e1028a1df289da1f57d82ff11f7542b693b3475" alt=""><figcaption><p><em><strong>Figure 1.</strong> Example appearance of the component.</em></p></figcaption></figure>

<figure><img src="/files/3f23e121940efff74e81ef74b78b2688bf2e39a8" alt=""><figcaption><p><em><strong>Figure 2.</strong> Example properties of the component.</em></p></figcaption></figure>

### Resetting the component after changing the page

To make the component reset its value after leaving and re-entering the page:

1. Set in **the visibility condition** of the component:

```
getValue("currentPageMid") == "Page3"
```

Where `Page3` should be replaced by the business identifier of the page on which the component is located.

2. Add a listener for:

```
currentPageMid
```

This setting causes the component to re-render after the page changes and resets the counter to zero.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/0-struktura-i-nawigacja/nawigacja/odliczanie.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.