Spinner
Loading spinner is a waiting indicator in the user interface to communicate users an ongoing proccess.
| 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. | - |
() => { 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> ); }