Introduction
Components
Linear Progress

Linear Progress

The Linear Progress Bar is used to visualize continuous status, such as Downloads, Music Playback, or Delivery Tracking. It uses the ProgressInfo data class.

It supports a “Moving Icon” (which slides along the bar) and a “Destination Icon” (fixed at the end).

Usage 

1
2
3
4
5
6

builder.setProgressBar(
    progress = 75,       // Current percentage (0-100)
    color = "#34C759",   // Color of the filled bar
    picForwardKey = "car_icon", // Icon moving with the progress
    picEndKey = "flag_icon"     // Icon at the end of the bar
)

Parameters (ProgressInfo)

ParameterTypeDescription
progressIntRequired. The current value (0 to 100).
colorProgressString?Hex color for the filled portion of the bar (Start/Main color).
colorProgressEndString?Hex color for the end of the bar (if using a gradient).
picForwardString?Key for the icon that sits on the leading edge (moves with progress).
picMiddleString?Key for an icon placed in the center of the bar (when active/passed).
picMiddleUnselectedString?Key for the center icon when the progress has not yet reached the middle.
picEndString?Key for the icon at the far right (100% mark) when active/reached.
picEndUnselectedString?Key for the icon at the far right when the progress hasn’t reached 100% yet.

Gradient Support

You can create a gradient effect on the progress bar by specifying both a start and an end color.

1
2
3
4
5
6

// Example: Gradient from Blue to Teal
builder.setProgressBar(
    progress = 50,
    color = "#007AFF",       // Start Color
    colorEnd = "#30B0C7"     // End Color (maps to colorProgressEnd)
)
Hint InfoMulti-Node Progress