Progress

tile/progress

Indicates task completion as a percentage, shown as a linear bar or circular ring.

Use a progress indicator to show how far along a task or process is, such as a file upload, an installation, or a quota toward a target. It renders a labeled bar or ring that fills to reflect the current value. The progress indicator is read-only; it reports status rather than collecting input.

To create a progress indicator, provide a label and a value from 0 to 100 as a percentage. Use a label that names the operation, such as “Uploading file”, rather than restating the percentage.

1{
2    "definition": "tile/progress",
3    "attributes": {
4        "label": "Uploading file",
5        "value": 45
6    }
7}

To track progress toward a non-percentage target such as a quota or item count, set max. The indicator fill is then computed as value out of max.

1{
2    "definition": "tile/progress",
3    "attributes": {
4        "label": "Sales quota",
5        "value": 1500,
6        "max": 2000,
7        "size": "lg"
8    }
9}

To convey status, pair a color with the value. For example, set color to success when the task completes or warning as a limit approaches.

1{
2    "definition": "tile/progress",
3    "attributes": {
4        "label": "Storage usage",
5        "value": 85,
6        "color": "warning"
7    }
8}

Use shape to set the indicator’s geometric form. Both shapes communicate the same value. Only the visual form differs.

• linear (default): A horizontal bar that fills left to right.
• circular: A ring or arc that fills clockwise, which is useful for compact spaces or overlay contexts where a bar doesn’t fit.

Use size to set the indicator’s thickness for a linear bar, or its diameter for a circular ring.

• xs: Extra small. Use xs to keep the indicator unobtrusive.
• sm: Small.
• md (default): Medium, which is suitable for most contexts.
• lg: Large, which gives an important or long-running task more presence.
• xl: Extra large, which creates a focal point when progress is the primary content.

Use color to set the semantic color of the progress fill. On surfaces that can’t render semantic colors, the fill degrades to the default color.

• default: The default standard surface color with no specific status for ordinary, in-progress tasks.
• error: Indicates a failure or a critical threshold to reflect a problem state.
• primary: The brand or accent color to emphasize a featured task.
• success: Indicates positive completion when the task has finished successfully.
• warning: Indicates a caution state when a limit or threshold is approaching.

Consider these guidelines when working with progress indicators.

• Omit max for a plain percentage; set it only when tracking progress toward a specific target.
• Use color to reinforce status, but don’t rely on it alone as some surfaces render only the default fill.

Note any limitations that apply to this component.

No known limitations for tile/progress in Slackbot.

No known limitations for tile/progress in ChatGPT.

color is partially supported. Only success is native. error and warning use CSS overrides.

• HXL Lightning Types Reference
• HXL Playground: Progress