Loading indicator - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-loading-indicatortype="circular"label="Loading..."></ic-loading-indicator>
<ic-loading-indicatortype="linear"label="Loading..."></ic-loading-indicator>

<IcLoadingIndicatortype="circular"label="Loading..."/>
<IcLoadingIndicatortype="linear"label="Loading..."/>

Loading indicator details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property description Attribute description	The description that will be set as the aria-label of the loading indicator when not using a visible label. type: string - string \| undefined	"Loading"
Property fullWidth Attribute full-width	If`true` , when linear, the full-width variant (i.e. without a border radius) will be displayed. type: boolean - boolean \| undefined	false
Property label Attribute label	The label to be displayed beneath the loading indicator. Display a changing label by supplying an array of messages. type: string \| string[] - string \| string[] \| undefined
Property labelDuration Attribute label-duration	The time in milliseconds before the label changes. type: number - number \| undefined	8000
Property max Attribute max	The maximum value that the progress value can take. Used to calculate the proportional width of the progress bar. type: number - number \| undefined	100
Property min Attribute min	The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar. type: number - number \| undefined	0
Property monochrome Attribute monochrome	If`true` , the element will display as black and white. type: boolean - boolean \| undefined	false
Property progress Attribute progress	The current amount of progress made. If not provided, component acts as an indeterminate loading indicator. type: number - number \| undefined
Property size Attribute size	The size of the loading indicator. type: IcLoadingSizes - "icon" \| "large" \| "medium" \| "small" \| undefined	"medium"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property type Attribute type	The type of indicator, either linear or circular. type: IcLoadingTypes - "circular" \| "linear" \| undefined	"circular"

Property

description

Attribute

description

The description that will be set as the aria-label of the loading indicator when not using a visible label.

type: string - string | undefined

Default: "Loading"

Property

fullWidth

Attribute

full-width

Iftrue , when linear, the full-width variant (i.e. without a border radius) will be displayed.

type: boolean - boolean | undefined

Default: false

Property

label

Attribute

label

The label to be displayed beneath the loading indicator. Display a changing label by supplying an array of messages.

type: string | string[] - string | string[] | undefined

Property

labelDuration

Attribute

label-duration

The time in milliseconds before the label changes.

type: number - number | undefined

Default: 8000

Property

max

Attribute

max

The maximum value that the progress value can take. Used to calculate the proportional width of the progress bar.

type: number - number | undefined

Default: 100

Property

min

Attribute

min

The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar.

type: number - number | undefined

Default: 0

Property

monochrome

Attribute

monochrome

Iftrue , the element will display as black and white.

type: boolean - boolean | undefined

Default: false

Property

progress

Attribute

progress

The current amount of progress made. If not provided, component acts as an indeterminate loading indicator.

type: number - number | undefined

Property

size

Attribute

size

The size of the loading indicator.

type: IcLoadingSizes - "icon" | "large" | "medium" | "small" | undefined

Default: "medium"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

type

Attribute

type

The type of indicator, either linear or circular.

type: IcLoadingTypes - "circular" | "linear" | undefined

Default: "circular"

CSS Custom Properties

Name	Description
--circular-diameter	Diameter of the circular-indicator

--circular-diameter Diameter of the circular-indicator

Variants

Sizes

Interactive example

Web component

React

Show full code

<ic-loading-indicatortype="circular"label="Loading..."size="small"></ic-loading-indicator>
<ic-loading-indicatortype="circular"label="Loading..."size="large"></ic-loading-indicator>
<ic-loading-indicatortype="linear"label="Loading..."size="small"></ic-loading-indicator>
<ic-loading-indicatortype="linear"label="Loading..."size="large"></ic-loading-indicator>

<IcLoadingIndicatortype="circular"label="Loading..."size="small"/>
<IcLoadingIndicatortype="circular"label="Loading..."size="large"/>
<IcLoadingIndicatortype="linear"label="Loading..."size="small"/>
<IcLoadingIndicatortype="linear"label="Loading..."size="large"/>

Icon

Interactive example

Web component

React

Show full code

<ic-loading-indicatorsize="icon"></ic-loading-indicator>

<IcLoadingIndicatorsize="icon"/>

Determinate

Interactive example

Web component

React

Show full code

<ic-loading-indicatortype="circular"label="Progress 30%"progress="30"min="0"max="100"></ic-loading-indicator>
<ic-loading-indicatortype="linear"label="Progress 30%"progress="30"min="0"max="100"></ic-loading-indicator>

<IcLoadingIndicatortype="circular"label="Progress 30%"progress="30"min="0"max="100"/>
<IcLoadingIndicatortype="linear"label="Progress 30%"progress="30"min="0"max="100"/>

Theme

Interactive example

Web component

React

Show full code

<ic-loading-indicator
type="circular"
label="Loading"
theme="dark"
></ic-loading-indicator>
<ic-loading-indicator
type="linear"
label="Loading"
theme="dark"
></ic-loading-indicator>

<IcLoadingIndicatortype="circular"label="Loading"theme="dark"/>
<IcLoadingIndicatortype="linear"label="Loading"theme="dark"/>

Changing label

Interactive example

Web component

React

Show full code

<ic-loading-indicatortype="circular"label-duration="4000"></ic-loading-indicator>
<script>
          document.querySelector("ic-loading-indicator").label = [
            "Loading...",
            "Still loading...",
          ];
</script>

<IcLoadingIndicator
type="circular"
label={["Loading...","Still loading..."]}
labelDuration={4000}
/>

Last reviewed 31 May 2024 .