ProgressBar

ic.ProgressBar is a linear indicator for showing how far along an operation is. You set a numeric value within a range, and the bar fills proportionally. It supports indeterminate mode for operations with unknown duration, striped and animated patterns for visual emphasis, a built-in label with configurable formatting, and both horizontal and vertical orientations.

Value and range

Value determines the current fill level within the range defined by Min and Max (0 to 100 by default). The bar clamps to the range boundaries, so setting a value beyond Max still shows a full bar. Drag the value slider to see the bar fill in real time.

Variants

Variant sets the bar’s color. The five semantic options (primary, secondary, success, warning, destructive) map to theme tokens, while gradient is special: it interpolates a solid color from a set of color stops based on the current fill percentage. The default gradient goes from red through amber to green, which is a natural fit for progress that moves from “not started” to “complete.”

Size, stripes, and indeterminate

Size controls the track height (sm is thin, lg is chunky). Striped adds diagonal candy-stripe pattern to the filled portion, and Animated makes those stripes move (requires Striped to be on). Indeterminate switches to a looping animation when you don’t know the total duration, such as waiting for a network response.

Label

ShowLabel displays the current value alongside the bar, formatted with LabelFormat (using sprintf-style tokens like %d%% for “65%”, or %.1f for “65.0”). LabelPosition puts it on the left or right side. The label uses tabular numerals so digits don’t jump around as the value changes.

Orientation

Orientation flips the bar from horizontal to vertical. In vertical mode the bar fills from the bottom up, and label positions map so that “left” becomes the top and “right” becomes the bottom.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. In this example, we show a gradient-filled progress bar. The styleTrack() and styleBar() convenience methods target the background rail and fill portion directly, so you don’t need to look up the CSS class names yourself.

pb = ic.ProgressBar("Value", 72, "Size", "lg", ...
    "ShowLabel", true, "LabelFormat", "%.0f%%");

pb.styleTrack("background", "#ede9fe", ...
    "border_radius", "8px", ...
    "box_shadow", "inset 0 2px 4px rgba(139, 92, 246, 0.1)");

pb.styleBar("background", "linear-gradient(90deg, #8b5cf6, #ec4899)", ...
    "border_radius", "8px", ...
    "box_shadow", "0 2px 8px rgba(139, 92, 246, 0.35)");