# Progress

## **Specs**

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 0.1.0 (updated on 2026-05-04) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Column                        |
| **Support Configuration** | Yes                           |
| **Support Readonly view** | Yes                           |
| **Support Edit view**     | Yes                           |
| **Support Form view**     | Yes                           |
| **Support Default value** | Yes                           |
| **Support Import**        | Yes                           |
| **Allow multiple**        | Yes                           |

## Overview

The Progress widget displays a numeric value as a visual progress bar, making it easy to communicate completion status at a glance. Users can enter any numeric value representing a percentage, and the widget renders a filled bar proportional to that value. Color thresholds can be configured so the bar automatically changes color as the value crosses defined boundaries, enabling instant visual feedback on whether progress is on track, at risk, or complete.

## Use case

1. Use this widget to track the completion percentage of an experiment or protocol step.
2. Use this widget to monitor project milestones and display overall progress toward a goal.
3. Use this widget to visualize sample preparation or manufacturing batch progress across multiple records.
4. Use this widget to highlight critical thresholds in quality control workflows by coloring the bar red when progress falls below an acceptable level.

## Configuration

Users can configure color thresholds to change the progress bar color based on the current value. Each threshold entry defines an upper boundary and the color to display when the progress value is at or below that boundary. Thresholds are evaluated in order, and the first matching threshold determines the bar color.

* **Value** - The upper threshold for this color. When the progress value is less than or equal to this number, the specified color is applied.
* **Color** - The color to use when the progress value falls into this threshold. Accepts standard color names or hex codes (e.g., `red`, `#ff0000`).

### Examples

The following configuration displays the bar in red for values up to 30, yellow for values up to 70, and green for values above 70:

```json
[
  { "value": 30, "color": "red" },
  { "value": 70, "color": "yellow" },
  { "value": 100, "color": "green" }
]
```

## Views

See the interface of the widget in the following views.

### **Readonly view**

Readonly view display the values of the column.

The readonly view renders a horizontal progress bar filled to the percentage indicated by the stored value. The numeric percentage is displayed at the right end of the bar. The bar color follows any configured color thresholds.

<figure><img src="/files/X5a8NEIdISJnTWRcSZTu" alt=""><figcaption></figcaption></figure>

### **Edit view**

The Edit view is the interface that allows you to modify the value.

The edit view presents a numeric input field pre-filled with the current value. A **CLEAR** button removes the existing value. Click **SUBMIT** to save the new value or **CANCEL** to discard changes.

<figure><img src="/files/3VyvIRFCDlMCuIIZF2Xf" alt=""><figcaption></figcaption></figure>

### **Form view**

The Form view is the field integrated into the add form for collecting values when creating a new record.

The Form view is same as the Edit view.

## Data

Each widget in Labii stores data in a unique manner; refer below to understand how data from this widget is stored.

### Data format

A numeric value representing the progress percentage (e.g., `60`).

### **Default value**

The Default Value field within the column allows you to specify the default value when a record is created.

Default value can be any numeric value (e.g., `0`).

### **Import value**

The Import Value is the value you need to include in your Excel table for it to be imported into Labii.

Import value must be a numeric value (e.g., `60`).


---

# 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.labii.com/widgets/column-widgets/data-analysis/visualization/progress.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.