progress

import { progress } from '@markless/ui';

export default function Exportfunction Export(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<progress.root(alias) function root({ value, min, max, children, ...rest }: progress.ProgressRootProps): Element value(property) value?: number | null | undefinedHow far along the task is. Omit it, or pass `null`, for an unknown amount.={30}>
		<progress.label(alias) function label({ children, ...rest }: progress.ProgressLabelProps): Element>Export data 30%</progress.label(alias) function label({ children, ...rest }: progress.ProgressLabelProps): Element>
		<progress.track(alias) function track({ children, ...rest }: progress.ProgressTrackProps): Element>
			<progress.indicator(alias) function indicator({ children, ...rest }: progress.ProgressIndicatorProps): Element />
		</progress.track(alias) function track({ children, ...rest }: progress.ProgressTrackProps): Element>
	</progress.root(alias) function root({ value, min, max, children, ...rest }: progress.ProgressRootProps): Element>
}

The track is the full length of the range and the indicator sits inside it, so the fill is a width your stylesheet sets from the value the family reports. Leave value out, or pass null, and the amount is unknown — the bar reports itself as indeterminate rather than as zero, which is a different thing to a screen reader.

Anatomy

• progress.root — the bar. Holds the value and the range.
• progress.label — the words beside it.
• progress.track — the full length of the range.
• progress.indicator — the filled part, inside the track.

It writes ui-progress, ui-value, ui-min and ui-max.

Props on progress.root

Prop	Type	What it does
value	number | null	How far along the task is. Omit it, or pass null, for an unknown amount.
min	number	The bottom of the range. Omit it and the range starts at 0.
max	number	The top of the range. Omit it and the range ends at 100.

Everything a <div> accepts reaches the element too.