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, media status chip, or refresh affordance. With value: Some(...) it answers "how far through is this?". With value: None it becomes an indeterminate animated activity indicator.

Example

use fission::prelude::*;

let widget: Widget = CircularProgress {
    value: Some(0.72),
    size: 44.0,
    color: None,
    track_color: None,
    thickness: 4.0,
}
.into();

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

Field table

Field	Type	Meaning	Notes / default behavior
value	Option<f32>	Progress fraction for the ring.	Use Some(0.0..=1.0) for determinate progress. Use None for indeterminate activity.
size	f32	Outer width and height of the indicator.	Defaults to 40.0.
color	Option<Color>	Indicator arc color override.	Defaults to the theme's primary color.
track_color	Option<Color>	Background track color override.	Defaults to the theme's border color.
thickness	f32	Stroke width of the ring.	Defaults to 4.0.
animated	bool	Whether indeterminate mode should spin.	Defaults to true. Applies when value is None.

Determinate versus indeterminate behavior

value: None is indeterminate mode. The widget draws a partial arc and, when animated is true, registers a rotation animation for its id. Give each concurrently animated indicator a stable distinct WidgetId so their animation state does not collide.

For determinate progress, pass Some(fraction). 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.

Production checklist

For CircularProgress, review the fields that change behavior before treating the widget as finished: value, size, color, track_color, thickness, animated. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same CircularProgress setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

ProgressBar, Spinner, Stat, and Skeleton.