Loading indicator
Component demo
Interactive example
<ic-loading-indicator type="circular" label="Loading..."></ic-loading-indicator><ic-loading-indicator type="linear" label="Loading..."></ic-loading-indicator><IcLoadingIndicator type="circular" label="Loading..." /><IcLoadingIndicator type="linear" label="Loading..." />Loading indicator details
Props
All components also accept native properties supported by the DOM, such as className and style.
The appearance of the loading indicator, e.g. dark or light. | ||
The description that will be set as the aria-label of the loading indicator when not using a visible label. | ||
If | ||
The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes. | ||
The time in milliseconds before the label changes. | ||
The maximum value that the progress value can take. Used to calculate the proportional width of the progress bar. | ||
The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar. | ||
The current amount of progress made. If not provided, component acts as an indeterminate loading indicator. | ||
The size of the loading indicator. | ||
The type of indicator, either linear or circular. |
The appearance of the loading indicator, e.g. dark or light. |
The description that will be set as the aria-label of the loading indicator when not using a visible label. |
If |
The label to be displayed beneath the loading indicator. Display a changing label by separating multiple messages with forward slashes. |
The time in milliseconds before the label changes. |
The maximum value that the progress value can take. Used to calculate the proportional width of the progress bar. |
The minimum value that the progress value can take. Used to calculate the proportional width of the progress bar. |
The current amount of progress made. If not provided, component acts as an indeterminate loading indicator. |
The size of the loading indicator. |
The type of indicator, either linear or circular. |
CSS Custom Properties
Variants
Sizes
Interactive example
<ic-loading-indicator type="circular" label="Loading..." size="small"></ic-loading-indicator><ic-loading-indicator type="circular" label="Loading..." size="large"></ic-loading-indicator><ic-loading-indicator type="linear" label="Loading..." size="small"></ic-loading-indicator><ic-loading-indicator type="linear" label="Loading..." size="large"></ic-loading-indicator><IcLoadingIndicator type="circular" label="Loading..." size="small" /><IcLoadingIndicator type="circular" label="Loading..." size="large" /><IcLoadingIndicator type="linear" label="Loading..." size="small" /><IcLoadingIndicator type="linear" label="Loading..." size="large" />Icon
Interactive example
<ic-loading-indicator size="icon"></ic-loading-indicator><IcLoadingIndicator size="icon" />Determinate
Interactive example
<ic-loading-indicator type="circular" label="Progress 30%" progress="30" min="0" max="100"></ic-loading-indicator><ic-loading-indicator type="linear" label="Progress 30%" progress="30" min="0" max="100"></ic-loading-indicator><IcLoadingIndicator type="circular" label="Progress 30%" progress="30" min="0" max="100" /><IcLoadingIndicator type="linear" label="Progress 30%" progress="30" min="0" max="100" />Light
Interactive example
<ic-loading-indicator type="circular" label="Loading" appearance="light" ></ic-loading-indicator> <ic-loading-indicator type="linear" label="Loading" appearance="light" ></ic-loading-indicator><IcLoadingIndicator type="circular" label="Loading" appearance="light" /><IcLoadingIndicator type="linear" label="Loading" appearance="light" />Changing label
Interactive example
<ic-loading-indicator type="circular" label="Loading.../Still loading..." label-duration="4000"></ic-loading-indicator><IcLoadingIndicator type="circular" label="Loading.../Still loading..." labelDuration={4000} />