| Name | Type | Description | Default |
|---|---|---|---|
| ariaLabel | string | Specifies a string to be used as the accessible name for the component when no label is provided or the mode is set to small. | 'Spinner' |
New inheritColor | boolean | If true, the color is inherited from the closest parent with a defined color. This allows users to adapt the spinner to the semantic color of the use case in which it is used. | false |
| label | string | Text to be placed inside the spinner. When the component is in small mode, this label acts as an aria-label value. | - |
| 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. | - |
| mode | 'large' | 'small' | 'overlay' | The different variants of the components. | 'large' |
| showValue | boolean | If true, the value is displayed inside the spinner. | false |
| value | number | The value of the progress indicator. If it's received the component is determinate, otherwise is indeterminate. | - |
() => { 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="var(--spacing-padding-xl)"> <DxcButton label="Show Spinner for 3 seconds" onClick={showModal} /> {isVisible && <DxcSpinner label="Loading..." mode="overlay" />} </DxcInset> ); }