Loading indicator

The loading indicator is the Material 3 expressive spinner. It morphs through a sequence of shapes while it turns. Use it for short waits inside an existing surface, such as a pull to refresh gesture or a panel that is loading its contents. To show real progress over a longer time, use progress indicators instead.

Usage#

The indicator does not show progress, so it only needs a label. It loops through seven shapes, with a new morph every 650ms, and makes a full turn every 4.7 seconds. contained puts the shape on a filled circle. Use it when the indicator floats over content, so it stays readable. Leave it off when the indicator sits on its own surface.

<script lang="ts">
	import { LoadingIndicator } from 'noph-ui'
</script>

<LoadingIndicator aria-label="Loading" />
<LoadingIndicator aria-label="Loading" contained />

Accessibility#

The indicator renders role="progressbar" without an aria-valuenow. This tells assistive technology that the wait has no known length. It has no visible text, so always pass an aria-label that says what is loading.

<LoadingIndicator
	aria-label="Loading search results"
/>

Theming#

The shape scales with --np-loading-indicator-size.

<script lang="ts">
	import { LoadingIndicator } from 'noph-ui'
</script>

<LoadingIndicator
	--np-loading-indicator-color="var(--np-color-on-error-container)"
	--np-loading-indicator-container-color="var(--np-color-error-container)"
	--np-loading-indicator-size="5rem"
	aria-label="Loading, custom"
	contained
/>

API#