Loader

Loaders are used to visually communicate processing.

Overview

Loaders show that something is loading, computing, or processing with a spinning visual.

Loader type's can be set as "determinate" or "indeterminate". As a good UX practice, "determinate" should be used whenever it is possible to relay the loading percentage.

Sample

1
<calcite-loader label="Adjusting polygons..."></calcite-loader>
v3.0.3

Best practices

Try not to overuse Loaders. Some interface elements can benefit from skeleton states, or by utilizing the Progress component.

Accessibility

Loader must have an accompanying label property to provide context to assistive technologies. Add a concise description so users are able to interpret why the Loader is present.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
inlineinlineWhen true, the component displays smaller.booleanfalse
labelrequiredlabelAccessible name for the component.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
texttextWhen not inline, displays text under the component's indicator.string""
typetypeSpecifies the component type. Use "indeterminate" if finding actual progress value is impossible. Otherwise, use "determinate" to have the value indicate the progress or "determinate-value" to have the value label displayed along the progress."determinate" | "determinate-value" | "indeterminate""indeterminate"
valuevalueThe component's value. Valid only for "determinate" indicators. Percent complete of 100.number0

Styles

NameDescription
--calcite-loader-font-sizeWhen type is not "indeterminate" or inline, specifies the font size of the loading percentage.
--calcite-loader-sizeWhen inline is not set, specifies the component's width and height.
--calcite-loader-size-inline
deprecated Use --calcite-loader-size. Specifies the width and height of the component when set to inline.
--calcite-loader-spacingSpecifies the the component's padding.
--calcite-loader-progress-color-inlineWhen inline, specifies the component's progress ring color.
--calcite-loader-text-spacingWhen not inline, specifies the component's text margin.
--calcite-loader-text-weightWhen not inline and text is provided, specifies the component's text font weight.
--calcite-loader-text-colorWhen not inline and text is provided, specifies the component's text color.
--calcite-loader-progress-colorWhen not inline, specifies the component's progress ring color.
--calcite-loader-track-colorSpecifies the component's track 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