# Odliczanie - Progress

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Komponent odliczania umożliwia wizualną reprezentację postępu.

![Ilustracja 1. Wygląd komponentu odliczania na wniosku](https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-90d898f24f43dfc6c05c1cbd0dad9fa419b5bab5%2Fprogress1.png?alt=media)

✅ **Kiedy stosować:**

* Musisz zaprezentować czas pozostały na wykonanie kroku lub wskazać czas oczekiwania na akcję systemu.

:x: **Kiedy nie stosować:**

* Akcja nie jest ograniczona czasowo, a chcesz jedynie pokazać postęp przechodzenia wniosku. **Stosuj**: opcja „Widoczność kroków" we zakładce [Właściwości](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/tworzenie-formularza/wlasciwosci-formularza#widoczność-kroków) formularza.

### Właściwości komponentu

| Właściwość Eximee Designer                                | Nazwa atrybutu w Źródle | Opis                                                                                                                                                             |
| --------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Etykieta (klucz)**                                      | labelKey                | Klucz ze słownika etykiet, który odpowiada za wyświetlaną nazwę (tytuł) komponentu.                                                                              |
| **Pozycja etykiety**                                      | labelPosition           | Określa położenie opisu względem paska postępu. Wartość `ABOVE_LINE` oznacza wyświetlanie etykiety nad linią paska.                                              |
| **Kierunek** (sekcja **Podstawowe właściwości**)          | directionOfProgress     | Określa kierunek postępu paska. Dostępne opcje: **Od lewej do prawej** (wartość wzrasta) oraz **Od prawej do lewej** (wartość maleje).                           |
| **Tryb wyświetlania** (sekcja **Podstawowe właściwości**) | displayMode             | Określa sposób prezentacji informacji o stanie postępu. Opcje: **Czas** (minuty i sekundy), **Procent** (%) oraz **Brak**. Domyślnie: "Czas (minuty i sekundy)". |
| **Czas maks.** (sekcja **Podstawowe właściwości**)        | duration                | Określa całkowity czas (w sekundach) potrzebny na pełne "ładowanie" paska postępu. Domyślnie: 60.                                                                |
| **Skok \[s]** (sekcja **Podstawowe właściwości**)         | valueUpdateInterval     | Określa interwał czasowy (w sekundach), co jaki następuje wizualna aktualizacja paska. Domyślnie: 1.                                                             |
| **Auto-zapis \[s]** (sekcja **Podstawowe właściwości**)   | valueSaveInterval       | Określa częstotliwość (w sekundach), z jaką komponent zapisuje swoją aktualną wartość na serwerze. Domyślnie: 1.                                                 |

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

<br>

<figure><img src="https://1082717226-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>Ilustracja 1.</strong> Przykładowy wygląd komponentu.</em></p></figcaption></figure>

<figure><img src="https://1082717226-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>Ilustracja 2.</strong> Przykładowe właściwości komponentu.</em></p></figcaption></figure>
