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

2 samples
1
<calcite-progress value="80"></calcite-progress>
v3.0.3

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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close