Skip to main content

CircularProgress

CircularProgress is the round progress indicator.

It is useful when progress needs to fit into a small square region such as a sidebar card, dashboard tile, or media status chip. It answers "how far through is this?" without consuming a full row the way a linear bar does.

Example​

use fission::prelude::*;

let node = CircularProgress {
    value: Some(0.72),
    size: 44.0,
    color: None,
    track_color: None,
    thickness: 4.0,
}
.build(ctx, view);

This gives a compact 72 percent progress ring that can sit beside text or a stat value.

Field table​

FieldTypeMeaningNotes / default behavior
valueOption<f32>Progress fraction for the ring.Use Some for determinate progress. None means indeterminate intent, but see note below.
sizef32Outer width and height of the indicator.Defaults to 40.0.
colorOption<Color>Indicator arc color override.Defaults to the theme's primary color.
track_colorOption<Color>Background track color override.Defaults to the theme's border color.
thicknessf32Stroke width of the ring.Defaults to 4.0.

Determinate versus indeterminate behavior​

The public contract suggests that value: None is the indeterminate mode. In the checked-in implementation, though, that mode currently renders a fixed partial arc rather than a spinning animated indicator. For true indeterminate loading feedback, Spinner is the better current choice.

Also note that the widget expects a value in the 0.0 to 1.0 range and does not clamp it internally. Clamp upstream if the data may drift outside that range.

Specific advice​

Pair circular progress with text when precision matters. A ring is good at showing relative advancement, but not always good at communicating exact meaning on its own.

ProgressBar, Spinner, Stat, and Skeleton.