Skip to content

Progress

Progress is a thin and linear visual designed to show processing time for a task or workflow.

Overview

Designed to be used on a top or bottom edge of an area, Progress can be a helpful UX device to show the user something is being processed or loaded.

Progress has a smaller height than Loader and is less obtrusive, which can be handy in tight spaces. Prefer the "determinate" type when processing time can be accurately represented.

Usage

Sample

Best practices

Progress typeUsage
"determinate"Preferred type. Use when processing percentage can be relayed to the user.
"indeterminate"Use when a processing percentage cannot be relayed.
Correct Progress determinate
Do defer to determinate Progress bar whenever possible.
Avoid Progress floating no edge
Avoid floating Progress bars on elements that are lacking a hard edge or border. Defer to Loader for these instances.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
labellabelAccessible name for the component.string
reversedreversedWhen true and for "indeterminate" progress bars, reverses the animation direction.booleanfalse
texttextText that displays under the component's indicator.string
typetypeSpecifies the component type. Use "indeterminate" if finding actual progress value is impossible."determinate" | "indeterminate""determinate"
valuevalueWhen type is "determinate", specifies the component's value with a range of 0 to 100.number0

Styles

NameDescription
--calcite-progress-background-colorSpecifies the component's background color.
--calcite-progress-fill-colorSpecifies the component's fill color.
--calcite-progress-text-colorSpecifies the component's text color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.