Spinner

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

Props

NameTypeDescriptionDefault
labelstringText 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'
valuenumberThe value of the progress indicator. If it's received the component is determinate, otherwise is indeterminate.-
showValuebooleanIf true, the value is displayed inside the spinner.false
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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>
  );
}

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