FluxProgress

A progress indicator. Set determinate=True with a value in 0..100 when you know the ratio; set determinate=False for unknown-duration waits (the renderer animates a shimmer). Always provide accessibility.label — assistive tech needs context (‘Uploading photo’, not just ‘progress’).

Extends: Slider (a2ui/basic@0.10)

Category: primitive

Props

Name	Type	Required	Default
accessibility	object	yes	``
component	'FluxProgress'	yes	``
determinate	boolean	yes	True
id	string	yes	``
label	string	no	``
size	'sm' | 'md' | 'lg'	yes	'md'
tone	'default' | 'success' | 'warning' | 'danger'	yes	'default'
value	number	yes	0

Examples

Determinate progress at 60%.

UI.progress(value=60, label="Uploading", tone="default")

Indeterminate shimmer for unknown-duration waits.

UI.progress(determinate=False, label="Preparing report", tone="default")

Anti-patterns

Avoid: accessibility.label is required. Screen readers announce progress without any cue of what’s progressing.

UI.progress(value=40)   # no accessibility.label

Avoid: value must be in 0..100. Pass determinate=False for unknown-bounded progress.

UI.progress(value=150)

Tokens used

• $color.bg.subtle

• $color.danger.solid

• $color.primary.solid

• $color.success.solid

• $color.warning.7

• $motion.duration.slow

• $motion.easing.emphasized

• $radius.full

• $space.1

• $space.1_5

• $space.2

Basic-catalog fallback

• Component: Slider

• Prop map: value → value

• Notes: Basic renderers speak Slider — indeterminate mode and tone coloring are lost; the bar renders as a static slider pinned to value.