Spinner

const Preview = () => {
  return <Spinner aria-label='Henter kaffi' />;
};

render(<Preview />)

Use Spinner when

• you need to indicate that the system is working on a task the user must wait for
• a local action is being performed, such as submitting a form or updating a table
• loading will take more than one second

Avoid Spinner when

• only specific parts of the page are loading — consider using Skeleton instead
• loading takes less than one second

Example

Sizes

You can adjust the size of the Spinner depending on where it is placed.

const Sizes = () => {
  return (
    <>
      <Spinner aria-label='Henter kaffi' data-size='2xs' />
      <Spinner aria-label='Henter kaffi' data-size='xs' />
      <Spinner aria-label='Henter kaffi' data-size='sm' />
      <Spinner aria-label='Henter kaffi' data-size='md' />
      <Spinner aria-label='Henter kaffi' data-size='lg' />
      <Spinner aria-label='Henter kaffi' data-size='xl' />
    </>
  );
};

render(<Sizes />)

Guidelines

The purpose of Spinner is to reassure the user that the system is working and has not stopped. It can be used in a button, a field, or another defined area where the user is waiting for something to happen, such as saving or updating content.

Text

In some cases, it may improve the user experience to show explanatory text alongside the Spinner, describing why the user has to wait. A clear explanation helps reduce uncertainty and confusion.

const TextEn = () => {
  return (
    <>
      <Spinner aria-label='Preparing' data-size='sm' />
      <Paragraph>Preparing your file</Paragraph>
    </>
  );
};

render(<TextEn />)