# Linear Progress Bar

{% embed url="<https://youtu.be/kQia1fwLzg8?si=Z5juhmZMRlzXwh3h>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=kQia1fwLzg8>

The Linear Progress Bar widget visually represents the progress of an operation in a **horizontal bar** form.\
It can work in two modes:

* **Determinate** – shows actual progress (e.g., 35%, 70%, 100%).
* **Indeterminate** – shows a continuous animation when the exact progress is unknown.

This widget is useful for loading states, uploads, background tasks, and any process where you want to keep the user informed in a compact, horizontal way (e.g., below a button, inside a card, or at the top of the screen).

#### Adding a Linear Progress Bar Widget

The Linear Progress Bar widget is located in the **Form Elements** section of the Widget Palette. Once added, you can configure its properties from the **Widget Properties Panel**.

### Use Cases

The **Linear Progress Bar** shows **progress along a line**, usually from left to right.\
Use it whenever you want to **visually represent completion or loading** in a slim, unobtrusive way.

Use **Linear Progress Bar** for:

* **Loading & Fetching**
  * Show progress while downloading, uploading, or syncing data
  * Indicate that a background task (import, export, backup) is in progress
* **Step or Task Completion**
  * Display how much of a form, onboarding, or setup flow is completed
  * Show “x% complete” for profile, KYC, or configuration steps
* **Process Tracking**
  * Order status progress (e.g., Placed → Packed → Shipped → Delivered)
  * Progress for generating reports, processing payments, or applying changes

### Core Concepts

The Linear Progress Bar:

* Draws a background track (full-width bar).
* Draws a filled portion (indicator) on top of it.
* Uses the `type` property to decide how to behave:
  * **Determinate:** Uses `progressValue` (0–100) to show how much is completed.
  * **Indeterminate:** Ignores specific percentages and shows a continuous sliding or looping animation.

You can control:

* **How it looks** → `height`, `indicatorColor`, `bgColor`.
* **How it animates** → `animation`, `animateFromLastPercent`.
* **How it behaves** → `type`, `progressValue`.

### Properties

| Property                 | Description                                                                                         |
| ------------------------ | --------------------------------------------------------------------------------------------------- |
| `type`                   | The type of progress bar: determinate or indeterminate.                                             |
| `progressValue`          | The progress value for a determinate progress bar (from 0 to 100). Ignored in indeterminate mode.   |
| `height`                 | The thickness (vertical size) of the linear progress bar.                                           |
| `indicatorColor`         | The color of the progress indicator (the filled part of the bar).                                   |
| `bgColor`                | The background color of the progress bar’s track (the unfilled portion).                            |
| `animation`              | If true, changes in `progressValue` will be animated rather than jumping abruptly.                  |
| `animateFromLastPercent` | If true, the progress animation starts from the previous value and smoothly moves to the new value. |

### Default Properties

The Linear Progress Bar widget supports all [default-properties](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").