Spinner

Loading spinner is a waiting indicator in the user interface to communicate users an ongoing proccess.

Usage

There should only be a single spinner on a page at one time.
Only use the spinner component in a process that takes more than one second.
The text of the action is not mandatory but recommendable.
If only a portion of a page is displaying new content or being updated, use a medium or small spinner in that part of the page.

Variants

There are three different variants for the spinner component due to the size or the position: large, small and overlay.

Spinner variants

Determinate or indeterminate

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="2rem" justifyContent="center">
        <DxcSpinner label="Loading..." showValue value={50} />
        <DxcSpinner label="Loading..." />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="2rem" justifyContent="center">
        <DxcSpinner label="Loading..." showValue value={50} />
        <DxcSpinner label="Loading..." />
      </DxcFlex>
    </DxcInset>
  );
}

Determinate indicators display how long a process will take. They should be used in longer processes.
Indeterminate indicators express an unspecified amount of wait time. They should be used when:
The processing time is unknown.
The wait time is expected to be short enough that it's not necessary to display.

Contents

Usage
Variants
Determinate or indeterminate

Edit this page on GitHub

Report an issue on GitHub

Previous

NextStatus Light