Playground · Loading & feedback

Wavy Progress

  • motion component
  • iOS
  • Android
  • Flutter 3.47.0+

A Material 3 Expressive progress indicator whose filled part is a travelling sine wave, with a gap, a flat remaining track and a stop dot, as a bar or a ring. The wave calms to a flat line as it completes, and an indeterminate mode sweeps a wavy segment along the track.

Version 1.1.0 · What changed
  • 1.1.0 2026-10-06 The words screen readers hear are now arguments: loadingLabel (default "Loading") and valueLabel (a function from the percentage, default "64%"), for other languages.
  • 1.0.1 2026-10-03 Switching from indeterminate to a value now sweeps up from empty instead of from the stale value, a small ring follows a long wavelength (at least one wave instead of three), and time spent muted on an offstage route no longer jumps the wave on when it returns.
  • 1.0.0 2026-10-03 First release.

Parameters

A horizontal bar that fills from the leading edge, or a ring that fills clockwise from the top.

How much is done, in percent; change it to watch the wave run on from where it is. The wave flattens as it nears 0 or 100.

Sweeps a wavy segment along the track instead of showing the value, for work of unknown length.

The colour of the wave and of the stop dot.

The flat track still to be filled.

The stroke width of the wave and the track.

How far the wave swings either side of the track's centre line; 0 draws a flat line.

The distance from one crest to the next. A ring rounds it so a whole number of waves fits round, at least one.

How fast the wave travels and the indeterminate segment sweeps: one wavelength a second at 1. 0 holds it still.

The width of the linear bar; it narrows to fit a smaller space.

The diameter of the circular ring; it shrinks to fit a smaller space.

Loading Preview…

Send to your coding agent

Add Sheen's MCP server once, then paste the prompt. No key or account needed.

Run in your project (Claude Code)
claude mcp add --transport http sheen https://sheen.ciroapps.com/api/mcp
Then ask your agent
Use the Sheen MCP server to add the Wavy Progress Component to this Flutter app. Call get_export with componentId "wavy-progress" and parameters {"style":"linear","value":64,"indeterminate":false,"color":"B69CFF","trackColor":"3B3452","thickness":8,"amplitude":5,"wavelength":40,"speed":1,"width":320,"size":120}, then follow the install steps it returns. (Tuned in the Sheen Playground: https://sheen.ciroapps.com/c/wavy-progress?style=linear&value=64&indeterminate=false&color=B69CFF&trackColor=3B3452&thickness=8&amplitude=5&wavelength=40&speed=1&width=320&size=120)