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
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>
  );
}
  • 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.