Spinner

Fission

Product

▾

Setup

›

›

Spinner is the indeterminate loading indicator.

Use it when the app is working but does not have a meaningful completion fraction yet. This is the right choice for short waits such as opening a panel, checking a server, or refreshing a view where exact progress is unknown.

Example

use fission::prelude::*;

let widget: Widget = Spinner {
    id: WidgetId::explicit("sync_spinner"),
    color: None,
    animated: true,
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
id	WidgetId	Stable identity used to drive the dot animations.	Required.
color	Option<Color>	Dot color override.	Defaults to the theme's primary color.
animated	bool	Whether the dots should pulse.	Defaults to true.

user experience guidance

A spinner says "work is happening" but does not explain how long it will take. That makes it useful for short or uncertain waits, but weaker than a real progress indicator for long-running tasks.

The checked-in widget uses three animated dots. Stable ids matter here just as they do for other animated widgets.

Production checklist

For Spinner, review the fields that change behavior before treating the widget as finished: id, color, 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.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

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 Spinner 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.

Skeleton, CircularProgress, ProgressBar, and EmptyState.