ProgressBar

ProgressBar is the linear progress indicator.

Use it when the user should see how far through a task or process the app has moved, but precision can stay visual rather than textual. It is especially good for uploads, imports, setup steps, and background work that already has a real completion fraction.

Example

use fission::prelude::*;

let widget: Widget = ProgressBar { value: 0.35 }.into();

This renders a bar filled to 35 percent of its width.

Field table

Field	Type	Meaning	Notes / default behavior
value	f32	Progress fraction from empty to full.	The checked-in widget clamps it to the 0.0 to 1.0 range.

When to use it

A linear bar is usually easier to read than a circular one when the layout already has horizontal room, especially in forms, task flows, and lists. It also pairs naturally with descriptive text above or below it.

The widget is purely visual. If exact progress matters, pair it with text such as 35% or 3 of 8 completed.

Production checklist

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

CircularProgress, Spinner, Skeleton, and Stat.