Progress

Calcite 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 prop when processing time can be accurately presented.

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Progress typeUsage
IndeterminateFor general interface loads when percentage cannot be relayed.
DeterminateWhen processing percentage can be relayed to the user.
  • Top/bottom of a panel, popover, modal, card, tile, or area with a clear edge to show processing time
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

calcite-progress
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
labellabel

Label for the progress indicator

stringA custom string
undefined
reversedreversed

For indeterminate progress bars, reverse the animation direction

booleanA boolean property should be present, or not
truefalse
texttext

Text to display for the progress indicator

stringA custom string
undefined
typetype

Use indeterminate if finding actual progress value is impossible

typedChoose from a set of typed values
determinate (default)indeterminate
valuevalue

Fraction completed, in the range of 0 - 1.0

numberA number
0 (default)

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