CircularProgressBar

ic.CircularProgressBar is a circular progress indicator that draws an SVG arc to show completion. It shares the same value, variant, gradient, and label concepts as ic.ProgressBar, but adds properties for arc geometry (start angle, sweep angle), stroke appearance (width, line cap), and optional graduation tick marks. This makes it a good fit for gauges, dials, and compact status indicators.

Value and variants

Value fills the arc proportionally within the Min/Max range, just like the linear version. Variant maps the arc color to one of the theme’s semantic tokens. When the total duration is unknown, toggle Indeterminate to switch from a static fill to a smooth animated pulse that travels along the arc.

Gradient

Setting Variant to "gradient" enables a special mode where the arc color is interpolated from a set of color stops based on the current fill percentage. The default goes from red (0%) through amber (50%) to green (100%), which naturally maps to a “bad to good” scale. You can customize the stops by passing a struct array with color and stop fields, for example to create a temperature gauge that transitions from blue through white to red.

Size, stroke, and line cap

Size sets the overall diameter (sm is 48px, md is 72px, lg is 112px). StrokeWidth controls the arc thickness in SVG units (the viewBox is 100x100, so a width of 10 means the arc is 10% of the diameter). LineCap shapes the endpoints of the arc: butt cuts them flat, round adds semicircular caps, and square extends them slightly with square ends.

Arc geometry

StartAngle rotates where the arc begins (0 is 12 o’clock, measured clockwise in degrees), and SweepAngle controls how far around the circle the arc spans. A sweep of 180 gives you a half-circle gauge, 270 leaves a gap at the bottom like a speedometer, and 360 is the full ring. The fill percentage is always relative to the sweep range, not the full circle.

Ticks and label

ShowTicks adds graduation marks around the ring, evenly spaced within the sweep range. TickCount controls how many (up to 60). ShowLabel displays the formatted value in the center, using LabelFormat for sprintf-style formatting (%d%% for “65%“, %.1f for “65.0”, and so on).

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. Here you can see a violet gauge with a glowing arc and a tinted label. styleTrack(), styleBar(), and styleLabel() target the SVG track circle, filled arc, and center label respectively.

cpb = ic.CircularProgressBar("Value", 78, ...
    "Size", "lg", "StrokeWidth", 6, ...
    "LineCap", "round", "ShowLabel", true);

cpb.styleTrack("stroke", "#ede9fe");

cpb.styleBar("stroke", "#8b5cf6", ...
    "filter", "drop-shadow(0 0 4px rgba(139, 92, 246, 0.5))");

cpb.styleLabel("color", "#8b5cf6", ...
    "font_size", "1.4rem");