ant-design/components/spin/index.en-US.md
Rafael Martins cc223a102c
feat(spin): Adds fullscreen property to <Spin /> component (#44986)
* feat: start the implementation of the fullscreen prop in Spin

* docs: change main spin demo

* docs: enhance demo

* test: update snapshot

* fix: address pr comments

* fix: use logical property on fullscreen class

* fix: address pr review

* feat: Added background color token

* fix: remove onClick and change demo

* feat: change spin to white when fullcreen

also use the bgmask as background, removing the bgColor token

* fix: unused import

* test: update snapshot

* Update components/spin/style/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* fix: use white color from token

* fix: not needed interpolation and version

* fix: address pr review

* fix: tip prop was not working

* test: cover tip & fullscreen case

* fix: addrress pr coments

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <1075746765@qq.com>
2023-10-19 13:47:48 +08:00

1.9 KiB
Raw Blame History

category group title cover coverDark demo
Components Feedback Spin https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5mC5TomY4B0AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i43_ToFrL8YAAAAAAAAAAAAADrJ8AQ/original
cols
2

A spinner for displaying loading state of a page or a section.

When To Use

When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.

Examples

Basic Usage Size Inside a container Embedded mode Customized description Delay Custom spinning indicator Fullscreen

API

Common props refCommon props

Property Description Type Default Version
delay Specifies a delay in milliseconds for loading state (prevent flush) number (milliseconds) -
indicator React node of the spinning indicator ReactNode -
size The size of Spin, options: small, default and large string default
spinning Whether Spin is visible boolean true
tip Customize description content when Spin has children ReactNode -
wrapperClassName The className of wrapper when Spin has children string -
fullscreen Display a backdrop with the Spin component boolean false 5.11.0

Static Method

  • Spin.setDefaultIndicator(indicator: ReactNode)

    You can define default spin element globally.

Design Token