---
title: "Loading Spinner — React"
canonical: https://sky-ui.cf.sky.com/components/loading-spinner/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Loading Spinner — React

The loading spinner uses animation to show that an activity is in progress.

```js
import { LoadingSpinner } from '@sky-uk/ui-core';
```

---

The `LoadingSpinner` component is used to demonstrate when part of an application is loading.

---

```tsx
<Flex $gap={4}>
  <LoadingSpinner />
  <LoadingSpinner $size="small" />
</Flex>
```

---

## Button with LoadingSpinner

After the user clicks an active `Button`, it may show a `LoadingSpinner` and must be disabled for the duration of the loading state.

---

```tsx
<Button disabled>
  <Text>Submitting</Text>
  <LoadingSpinner $size="small" $marginLeft={2}/>
</Button>
```

---

## Props

### $size

- `small`
- `medium (default)`

### status

Defaults to "Loading" although where possible it's best to provide more context to the user i.e. "Fetching account details" or "Updating the basket" etc.

---

**Note:** By default the `LoadingSpinner` uses `role="status"`, this is suitable for most instances where we don't have any way of knowing progress. In instances where we know progress, we can use `role="progressbar"`, see [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role) for more.

### System Modifiers

The `LoadingSpinner` component also accepts props applied using the following system modifiers:

- [color](/core/system/color/)
- [flex-child](/core/system/flex-child/)
- [margin](/core/system/margin/)
- [position](/core/system/position/)