Progress
Introduction
A visual status component that communicates the completion progress of an operation. It displays real-time status values through either a standard linear bar tracker or a modern circular dial indicator. Primarily used to guide users during multi-step wizards, content uploading, file processing, or system installation routines.
The Progress component is fully integrated as a progress block in the Page Builder, allowing content authors and developers to easily configure visual ranges, themes, sizes, labels, and indicator layouts directly within the CMS.
Usage
These examples illustrate how content editors bind and structure interactive progress indicators.
1. Standard Linear Progress Bar with Status Label
A classic linear bar indicator showing download or processing progress with active label details and formatted percent texts.
{
"type": "progress",
"label": "System Backup",
"value": 72,
"showValueText": true,
"type": "linear",
"size": "md"
}
2. Compact Circular Progress Meter
Renders the visual completion metric as a compact circular dial. Useful for statistics overview charts, mini dashboard widgets, or isolated grid items.
{
"type": "progress",
"label": "Storage Used",
"type": "circular",
"value": 40,
"showValueText": true
}
3. Accented Striped Progress with Custom Color (Success Green)
Demonstrates how to apply a dedicated color theme palette, striped visual pattern, and large visual layout scale to a progress operations bar.
{
"type": "progress",
"label": "Uploading media files",
"value": 85,
"showValueText": true,
"striped": true,
"colorPalette": "green",
"size": "lg"
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Progress Label (label) | string | - | Optional descriptive heading positioned above the indicator track. |
Current Value (value) | number | 0 | Numeric completion value. Set to null to render an indeterminate/loading state. |
Minimum Value (min) | number | 0 | Lower bounds of the progress scale. |
Maximum Value (max) | number | 100 | Upper bounds of the progress scale. |
Display Percent (showValueText) | boolean | false | When checked, displays the exact numerical percentage text alongside the tracker. |
Indicator Type (type) | select | "linear" | Visual design format of the progress layout. • Options: "linear", "circular". |
Visual Variant (variant) | select | "solid" | Visual styling of the track and fill range. • Options: "solid", "subtle". |
Border Shape (shape) | select | "full" | Corner rounding applied to linear tracks. • Options: "square", "rounded", "full". |
Striped Track (striped) | boolean | false | Renders a visually striped diagonal pattern on linear bars. |
Color Theme (colorPalette) | select | "blue" | Theme palette applied to the track progress fill. • Options: blue, green, red, purple, orange, amber, cyan, slate. |
Size Scale (size) | select | "md" | Controls the vertical height or circular radius scale. • Options: "xs", "sm", "md", "lg", "xl". |
Developer Notes & Accessibility
- Hydration Free (Static-Only): The Progress component operates purely through layout bindings and standard CSS animations, designating it as a Static-Only component (
Tier 3) with zero client-side JavaScript bundle footprint. - WAI-ARIA Compliance: Under the hood, this component compiles to standard semantic progress wrappers (
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemax). If the value prop is unset or null, it automatically switches to an indeterminate loading state.