Spinner

Ready

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

Code

Usage

Specifications

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.

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.

Usage

Variants

Determinate or indeterminate

Edit this page on GitHub

Slider

NextSwitch

Spinner

Usage

Variants

Determinate or indeterminate

Contents