# 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](/ui-building-blocks/widgets/default-properties.md).


---

# Agent Instructions: 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:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/content-display-widgets/linear-progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.