Loading indicator

BETA

Component demo

Interactive example

Web component

React

<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 appearance Attribute appearance	The appearance of the loading indicator, e.g. dark or light. type: IcThemeForegroundNoDefault - "dark" \| "light"	"dark"
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	"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	false
Property label Attribute label	The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes. type: string
Property labelDuration Attribute label-duration	The time in milliseconds before the label changes. type: number	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	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	0
Property progress Attribute progress	The current amount of progress made. If not provided, component acts as an indeterminate loading indicator. type: number
Property size Attribute size	The size of the loading indicator. type: IcLoadingSizes - "default" \| "icon" \| "large" \| "small"	"default"
Property type Attribute type	The type of indicator, either linear or circular. type: IcLoadingTypes - "circular" \| "linear"	"circular"

Property

appearance

Attribute

appearance

The appearance of the loading indicator, e.g. dark or light.

type: IcThemeForegroundNoDefault - "dark" | "light"

Default: "dark"

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

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

Default: false

Property

label

Attribute

label

The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes.

type: string

Property

labelDuration

Attribute

label-duration

The time in milliseconds before the label changes.

type: number

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

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

Default: 0

Property

progress

Attribute

progress

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

type: number

Property

size

Attribute

size

The size of the loading indicator.

type: IcLoadingSizes - "default" | "icon" | "large" | "small"

Default: "default"

Property

type

Attribute

type

The type of indicator, either linear or circular.

type: IcLoadingTypes - "circular" | "linear"

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

<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

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

<IcLoadingIndicatorsize="icon"/>

Determinate

Interactive example

Progress 30%

Web component

React

<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"/>

Light

Interactive example

Web component

React

<ic-loading-indicator
type="circular"
label="Loading"
appearance="light"
></ic-loading-indicator>
<ic-loading-indicator
type="linear"
label="Loading"
appearance="light"
></ic-loading-indicator>

<IcLoadingIndicatortype="circular"label="Loading"appearance="light"/>
<IcLoadingIndicatortype="linear"label="Loading"appearance="light"/>

Changing label

Interactive example

Web component

React

<ic-loading-indicatortype="circular"label="Loading.../Still loading..."label-duration="4000"></ic-loading-indicator>

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

Last reviewed 31 May 2024 .