Skip to main content

Progress Bar

Progress indicators express an unspecified wait time or display the length of a process.

Figma Link

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=1358-31337

Web Components
Flutter

Demo

zeta-web v1.4.0

Web Components

Storybook

https://design.zebra.com/web/storybook/?path=/docs/components-progress--docs

Attributes

Name	Description	Type	Default
size	The size of the progress indicator. Can either be 'medium' or 'thin'.	`"thin" \| "medium"`	`"medium"`
indeterminate	Displays the indeterminate progress indicator. If set to true, any argument for 'value' will be ignored.	`boolean \| undefined`	`undefined`
value	The % complete of the process indicator.Input a floating point number to represent a percentage. Values must be between 0.0-1.0.If maxValue is set, value can be any number between 0 and maxValue.	`number`	`0`
maxValue	If maxValue is null treat value as a percentage	`number \| undefined`	`undefined`
label	The label for the progress indicator.	`string \| undefined`	`undefined`
buffering	Displays the buffering dots at the end of the progress indicator.Setting this will pause the animation if 'indeterminate' is set to true.	`boolean \| undefined`	`undefined`

Inherited Attributes

Name	Description	Type	Default	Inherited From
rounded	Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to `--radius-minimal`.Otherwise, this value will be `--radius-none`.	`boolean \| undefined`	`true`	Contourable

CSS Properties

Name	Description
--progress-bar-color	The color of the progress bar.