Loading indicator

The loading indicator is the Material 3 expressive take on a spinner. Instead of sweeping an arc around a circle, it morphs through a sequence of shapes while it turns. Use it for short waits inside a surface you already own, such as a pull to refresh gesture or a panel that is fetching its contents. For anything that reports real progress over a longer period, reach for progress indicators instead.

Usage#

The indicator gives no reading of progress, so it needs nothing but a label. It loops through seven shapes, a new morph every 650ms, and completes a full turn every 4.7 seconds. The whole animation is precomputed, so it runs on the browser's own timeline and costs no script while it spins. contained puts the shape on a filled circle. Use it when the indicator floats over content, where the container keeps it legible, and leave it off when the indicator sits on a surface of its own.

<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, and that missing value is what tells assistive technology that the wait has no known length. It has no text of its own, so always pass an aria-label saying what is loading.

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

Theming#

The shape is drawn relative to the container, so it scales with --np-loading-indicator-size without any further adjustment.

<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#