# Loading Spinner (/components/feedback/loading-spinner)
`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.
apps/docs/src/examples/loading-spinner/basic.tsx
```tsx
import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
export default () => {
return ;
};
```
## Size [#size]
`medium` is the default. Set `size` to match the surrounding control or content.
apps/docs/src/examples/loading-spinner/sizes.tsx
```tsx
import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## With content [#with-content]
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.
apps/docs/src/examples/loading-spinner/children.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Button } from '@luke-ui/react/button';
import { Checkbox } from '@luke-ui/react/checkbox';
import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { useState } from 'react';
export default () => {
const [isLoading, setIsLoading] = useState(true);
return (
Loading
);
};
```
## Colour [#colour]
Omit `color` to inherit the surrounding text colour. Set it only when the spinner needs to match
nearby semantic content.
apps/docs/src/examples/loading-spinner/colors.tsx
```tsx
import { LoadingSpinner } from '@luke-ui/react/loading-spinner';
import { Comparison, ComparisonItem } from '#docs/comparison';
export default () => {
return (
);
};
```
## Accessibility [#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`](/components/actions/button) `pressAction` or
`isPending`. Pending keeps the control focusable. Do not swap that behaviour for `isDisabled` with a
hand-rolled spinner.
## API [#api]