Spinner

Ready

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

Code

Usage

Specifications

Props

Name	Default	Description
label: string		Text to be placed inside the spinner.
mode: 'large' \| 'small' \| 'overlay'	`'large'`	The spinner can have overlay or small or large size.
value: number		The value of the progress indicator. If it's received the component is determinate, otherwise is indeterminate.
showValue: boolean	`false`	If true, the value is displayed inside the spinner.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). 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

Slider

NextSwitch

Spinner

Props

Examples

Basic usage

Overlay

Contents