Feedback

Loading Spinner

Animated indicator for work that is still in progress.

LoadingSpinner shows that work is in progress. Use it on its own for a small loading region. Wrap final content to replace it in place.

Loading Spinner: Basic

Open in playground

import { LoadingSpinner } from '@luke-ui/react/loading-spinner';

export default () => {
	return <LoadingSpinner aria-label="Loading" />;
};

Size

medium is the default. Set size to match the surrounding control or content. The sizes match Icon sizes and scale with the root font size.

An omitted size takes the icon size around it, from a control such as a Button or from --luke-icon-size, before falling back to medium.

Loading Spinner: Sizes

Open in playground

xsmallLoading

smallLoading

mediumLoading

largeLoading

import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison align="center">
			<ComparisonItem label="xsmall">
				<LoadingSpinner aria-label="Loading" size="xsmall" />
			</ComparisonItem>
			<ComparisonItem label="small">
				<LoadingSpinner aria-label="Loading" size="small" />
			</ComparisonItem>
			<ComparisonItem label="medium">
				<LoadingSpinner aria-label="Loading" size="medium" />
			</ComparisonItem>
			<ComparisonItem label="large">
				<LoadingSpinner aria-label="Loading" size="large" />
			</ComparisonItem>
		</Comparison>
	);
};

Pass final content with isLoading to replace it in place. While loading, the spinner keeps the content's dimensions and disables interactive descendants. Set isLoading to false to reveal the content.

Loading Spinner: With content

Open in playground

Saving changes

import { Button } from '@luke-ui/react/button';
import { CheckboxField } from '@luke-ui/react/checkbox-field';
import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { Stack } from '@luke-ui/react/stack';
import { useState } from 'react';

export default () => {
	const [isLoading, setIsLoading] = useState(true);

	return (
		<Stack alignItems="flex-start" gap="space.16">
			<LoadingSpinner aria-label="Saving changes" isLoading={isLoading}>
				<Button>Save changes</Button>
			</LoadingSpinner>
			<CheckboxField isSelected={isLoading} label="Loading" onChange={setIsLoading} />
		</Stack>
	);
};

Colour

Omit color to inherit the surrounding text colour. Set it only when the spinner needs to match nearby semantic content. Like Text, each value reads the nearest Luke UI background, so a spinner on a solid fill takes that fill's readable colour.

Loading Spinner: Colours

Open in playground

InheritedLoading

PrimaryLoading

SecondaryLoading

AccentLoading

InfoLoading

SuccessLoading

WarningLoading

DangerLoading

import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { Comparison, ComparisonItem } from '#docs';

export default () => {
	return (
		<Comparison>
			<ComparisonItem label="Inherited">
				<LoadingSpinner aria-label="Loading" />
			</ComparisonItem>
			<ComparisonItem label="Primary">
				<LoadingSpinner aria-label="Loading" color="primary" />
			</ComparisonItem>
			<ComparisonItem label="Secondary">
				<LoadingSpinner aria-label="Loading" color="secondary" />
			</ComparisonItem>
			<ComparisonItem label="Accent">
				<LoadingSpinner aria-label="Loading" color="accent" />
			</ComparisonItem>
			<ComparisonItem label="Info">
				<LoadingSpinner aria-label="Loading" color="info" />
			</ComparisonItem>
			<ComparisonItem label="Success">
				<LoadingSpinner aria-label="Loading" color="success" />
			</ComparisonItem>
			<ComparisonItem label="Warning">
				<LoadingSpinner aria-label="Loading" color="warning" />
			</ComparisonItem>
			<ComparisonItem label="Danger">
				<LoadingSpinner aria-label="Loading" color="danger" />
			</ComparisonItem>
		</Comparison>
	);
};

Accessibility

The spinner is a polite status region. Its accessible name defaults to loading. Provide an aria-label that names the work, such as Loading profile. While loading, the spinner hides wrapped children from assistive technology and blocks focus and activation.

For a standard loading control, prefer Button pressAction or isPending. Pending keeps the control focusable. Do not swap that behaviour for isDisabled with a hand-rolled spinner.

API

LoadingSpinnerProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
color	"accent" \|⁠ "danger" \|⁠ "info" \|⁠ "primary" \|⁠ "secondary" \|⁠ "success" \|⁠ "warning" \|⁠ undefined	—
Sets a semantic content color. Omit to inherit the surrounding content color.
isLoading	boolean	`true`
Whether the spinner is shown in place of `children`.
size	"large" \|⁠ "medium" \|⁠ "small" \|⁠ "xsmall" \|⁠ undefined	—
Sets the spinner size. Without it, the spinner takes the size its container sets, such as `xsmall` inside a Button, or `medium` elsewhere.