Spinner

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

Props

Name	Type	Description	Default
label	`string`	Text to be placed inside the spinner. When the component is in small mode, this label acts as an `aria-label` value.	-
mode	`'large' \| 'small' \| 'overlay'`	The different variants of the components.	`'large'`
value	`number`	The value of the progress indicator. If it's received the component is determinate, otherwise is indeterminate.	-
showValue	`boolean`	If true, the value is displayed inside the spinner.	`false`
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcSpinner />
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcSpinner />
    </DxcInset>
  );
}

Overlay

() => {
  const [isVisible, changeIsVisible] = useState(false);
  const showModal = () => {
    changeIsVisible(true);
    fetchData().then(() => {
      changeIsVisible(false);
    });
  };
  const fetchData = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    });
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Show Spinner for 3 seconds" onClick={showModal} />
      {isVisible && <DxcSpinner label="Loading..." mode="overlay" />}
    </DxcInset>
  );
}

() => {
  const [isVisible, changeIsVisible] = useState(false);
  const showModal = () => {
    changeIsVisible(true);
    fetchData().then(() => {
      changeIsVisible(false);
    });
  };
  const fetchData = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    });
  };

  return (
    <DxcInset space="2rem">
      <DxcButton label="Show Spinner for 3 seconds" onClick={showModal} />
      {isVisible && <DxcSpinner label="Loading..." mode="overlay" />}
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Overlay

Edit this page on GitHub

Report an issue on GitHub

Slider

NextStatus Light

Spinner

Props

Examples

Basic usage

Overlay

Contents