# Progress Bar widget

> Vonalas és kör alakú folyamatjelző, ikonnal, képpel vagy Lottie-animációval.

A **Progress Bar** widget adatot, százalékot vagy készültséget jelenít meg látványos formában. Két stílusa van: vízszintes sáv (**Progress Bar**) és kör (**Pie Chart**). A sáv mellé ikont, képet vagy Lottie-animációt is tehetsz.

A widget az ingyenes bővítményben van. Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Progress Bar** szóra, és kapcsold be.

![Vonalas folyamatjelző 72 százalékos kitöltéssel](./kepek/szovegek-adatok-folyamatjelzo.webp)

*Vonalas folyamatjelző 72 százalékos kitöltéssel* (https://minta-bolt.hu/tp-folyamat/)

## Layout szakasz

![A Progress Bar Layout szakasza](./kepek/szovegek-adatok-folyamatjelzo-panel.webp)

*A Progress Bar Layout szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Main Style** | **Progress Bar** (vízszintes sáv) vagy **Pie Chart** (kör) | Progress Bar |
| **Style** | A kiválasztott fő stílus változatai (képes választó) | Style 1 |
| **Height** | A sáv magassága: **Small Height**, **Medium Height**, **Large Height** (csak az első sávstílusnál) | Small Height |
| **Dynamic Value (0-100)** | A sáv vizuális kitöltése százalékban | 59 |

A **Dynamic Value (0-100)** csak a kitöltés animációját vezérli, magától nem jelenik meg szövegként. A sáv melletti szám a **Content** szakasz **Number** mezőjéből jön, és független a kitöltéstől: a kettő eltérő értéket is mutathat ugyanazon a sávon, ez normális.

## Content szakasz

- **Title** és **Sub Title**: a sáv fölött látszó cím és alcím (alapérték: `The Plus`).
- **Number**: a megjelenített szám (alapérték: 59).
- **Prefix/Postfix Symbol**: a szám mellé írt jel (alapérték: `%`).
- **Position**: a jel a szám előtt vagy után áll (**After Number**, **Before Number**).

## Icon szakasz

A **Select Icon** listából választhatsz: **None**, **Icon**, **Image** vagy **Lottie** (alapérték: **Icon**). Ikonnál és képnél az **Icon Position** a sáv elé (**Before**) vagy mögé (**After**) teszi a megjelenítőt.

## Lottie-animáció a folyamatjelzőben

Mozgó animációt tehetsz a statikus ikon helyére.

1. Szerezz egy Lottie JSON-fájlt, amely nyilvános URL-en elérhető (például a LottieFiles oldalról).
2. Add hozzá a **Progress Bar** widgetet.
3. Az **Icon** szakaszban a **Select Icon** listából válaszd a **Lottie** lehetőséget.
4. A megjelenő **Lottie URL** mezőbe illeszd be a JSON-fájl címét.

![A Select Icon a Lottie értékre állítva, mellette a Lottie URL mező](./kepek/szovegek-adatok-folyamatjelzo-lottie-panel.webp)

*A Select Icon a Lottie értékre állítva, mellette a Lottie URL mező* (https://minta-bolt.hu/wp-admin/post.php?post=14&action=elementor)

Fontos: a Lottie-fájlnak nyilvános URL-en kell lennie, ehhez a widgetben nincs fájlválasztó.

## Kör alakú folyamatjelző

A kör alakú változat kompakt módja egy statisztika vagy százalék megmutatásának.

1. Add hozzá a **Progress Bar** widgetet.
2. A **Main Style** listából válaszd a **Pie Chart** lehetőséget.
3. A **Style** és a **Round Style** képes választóban válaszd ki a változatot.
4. A **Stílus** fül **Pie Chart** szakaszában (amely csak kör fő stílusnál látszik) állítsd a **Dynamic Value (0-1)** értékét 0 és 1 közé, például `0.75` a 75 százalékhoz.

![A Pie Chart fő stílus beállításai a Layout szakaszban](./kepek/szovegek-adatok-folyamatjelzo-kor-panel.webp)

*A Pie Chart fő stílus beállításai a Layout szakaszban* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A **Pie Chart** szakasz további beállításai: **Pie Chart Circle Size**, **Thickness**, **Pie Empty Color**, **Chart Fill Color** (egyszínű vagy átmenetes kitöltés) és a hozzájuk tartozó színek.

![Kör alakú folyamatjelző 75 százalékkal](./kepek/szovegek-adatok-folyamatjelzo-kor.webp)

*Kör alakú folyamatjelző 75 százalékkal* (https://minta-bolt.hu/tp-folyamat-kor/)

### Ha a kör nem jelenik meg

Előfordulhat, hogy a kör helyett csak a szöveges mezők látszanak, rajzolt alakzat nélkül. A böngészőkonzolban ilyenkor a `Uncaught TypeError: $el.circleProgress is not a function` hiba áll: a kört rajzoló jQuery-bővítmény nem töltődött be az oldalra. Ez nem az Elementor panelen javítható beállítási hiba. Addig is használd a vonalas **Progress Bar** stílust, amely ettől függetlenül működik, és minden frissítés után ellenőrizd újra a kört.