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.

Select background colour

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

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

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:

color
flex-child
margin
position