Loading Spinner - React

View on Figma View on GitHub

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

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

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

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

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 for more.

System Modifiers

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