mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
demo: update Spin demo (#49753)
This commit is contained in:
lijianan
GitHub
parent
117dcd3395
commit
6b2b49c1dc
@ -33,124 +33,108 @@ exports[`renders components/spin/demo/basic.tsx extend context correctly 2`] = `
|
|||||||
|
|
||||||
exports[`renders components/spin/demo/custom-indicator.tsx extend context correctly 1`] = `
|
exports[`renders components/spin/demo/custom-indicator.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-align-center ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-spinning"
|
role="img"
|
||||||
|
style="font-size: 48px;"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
style="font-size: 48px;"
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -158,7 +142,9 @@ exports[`renders components/spin/demo/custom-indicator.tsx extend context correc
|
|||||||
exports[`renders components/spin/demo/custom-indicator.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/spin/demo/custom-indicator.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 1`] = `
|
exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 1`] = `
|
||||||
Array [
|
<div
|
||||||
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
>
|
>
|
||||||
@ -186,10 +172,8 @@ Array [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>
|
||||||
<div
|
<p>
|
||||||
style="margin-top: 16px;"
|
|
||||||
>
|
|
||||||
Loading state：
|
Loading state：
|
||||||
<button
|
<button
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
@ -211,8 +195,8 @@ Array [
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>,
|
</p>
|
||||||
]
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`;
|
||||||
@ -263,7 +247,9 @@ Array [
|
|||||||
exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/nested.tsx extend context correctly 1`] = `
|
exports[`renders components/spin/demo/nested.tsx extend context correctly 1`] = `
|
||||||
Array [
|
<div
|
||||||
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
>
|
>
|
||||||
@ -291,10 +277,8 @@ Array [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>
|
||||||
<div
|
<p>
|
||||||
style="margin-top: 16px;"
|
|
||||||
>
|
|
||||||
Loading state：
|
Loading state：
|
||||||
<button
|
<button
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
@ -316,214 +300,198 @@ Array [
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>,
|
</p>
|
||||||
]
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/nested.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/spin/demo/nested.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] = `
|
exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-align-center ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="ant-space-item"
|
aria-checked="false"
|
||||||
>
|
class="ant-switch"
|
||||||
<button
|
role="switch"
|
||||||
aria-checked="false"
|
type="button"
|
||||||
class="ant-switch"
|
|
||||||
role="switch"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-switch-handle"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner-checked"
|
|
||||||
>
|
|
||||||
Auto
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner-unchecked"
|
|
||||||
>
|
|
||||||
Auto
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
aria-busy="true"
|
class="ant-switch-handle"
|
||||||
aria-live="polite"
|
/>
|
||||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-switch-inner-checked"
|
||||||
>
|
>
|
||||||
<span
|
Auto
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
class="ant-switch-inner-unchecked"
|
||||||
>
|
>
|
||||||
<svg
|
Auto
|
||||||
aria-valuemax="100"
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuenow="0"
|
|
||||||
role="progressbar"
|
|
||||||
viewBox="0 0 100 100"
|
|
||||||
>
|
|
||||||
<circle
|
|
||||||
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
|
||||||
cx="50"
|
|
||||||
cy="50"
|
|
||||||
r="40"
|
|
||||||
stroke-width="20"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
class="ant-spin-dot-circle"
|
|
||||||
cx="50"
|
|
||||||
cy="50"
|
|
||||||
r="40"
|
|
||||||
stroke-width="20"
|
|
||||||
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-spin-dot-holder"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="0"
|
||||||
|
role="progressbar"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="40"
|
||||||
|
stroke-width="20"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-spin-dot-circle"
|
||||||
|
cx="50"
|
||||||
|
cy="50"
|
||||||
|
r="40"
|
||||||
|
stroke-width="20"
|
||||||
|
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
class="ant-spin-dot-holder"
|
||||||
aria-live="polite"
|
|
||||||
class="ant-spin ant-spin-spinning"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
>
|
>
|
||||||
<span
|
<i
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
class="ant-spin-dot-item"
|
||||||
>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
<span
|
||||||
|
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="0"
|
||||||
|
role="progressbar"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
>
|
>
|
||||||
<svg
|
<circle
|
||||||
aria-valuemax="100"
|
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
||||||
aria-valuemin="0"
|
cx="50"
|
||||||
aria-valuenow="0"
|
cy="50"
|
||||||
role="progressbar"
|
r="40"
|
||||||
viewBox="0 0 100 100"
|
stroke-width="20"
|
||||||
>
|
/>
|
||||||
<circle
|
<circle
|
||||||
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
class="ant-spin-dot-circle"
|
||||||
cx="50"
|
cx="50"
|
||||||
cy="50"
|
cy="50"
|
||||||
r="40"
|
r="40"
|
||||||
stroke-width="20"
|
stroke-width="20"
|
||||||
/>
|
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
||||||
<circle
|
/>
|
||||||
class="ant-spin-dot-circle"
|
</svg>
|
||||||
cx="50"
|
</span>
|
||||||
cy="50"
|
|
||||||
r="40"
|
|
||||||
stroke-width="20"
|
|
||||||
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
class="ant-spin-dot-holder"
|
||||||
aria-live="polite"
|
|
||||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
>
|
>
|
||||||
<span
|
<i
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
class="ant-spin-dot-item"
|
||||||
>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
<span
|
||||||
|
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="0"
|
||||||
|
role="progressbar"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
>
|
>
|
||||||
<svg
|
<circle
|
||||||
aria-valuemax="100"
|
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
||||||
aria-valuemin="0"
|
cx="50"
|
||||||
aria-valuenow="0"
|
cy="50"
|
||||||
role="progressbar"
|
r="40"
|
||||||
viewBox="0 0 100 100"
|
stroke-width="20"
|
||||||
>
|
/>
|
||||||
<circle
|
<circle
|
||||||
class="ant-spin-dot-circle-bg ant-spin-dot-circle"
|
class="ant-spin-dot-circle"
|
||||||
cx="50"
|
cx="50"
|
||||||
cy="50"
|
cy="50"
|
||||||
r="40"
|
r="40"
|
||||||
stroke-width="20"
|
stroke-width="20"
|
||||||
/>
|
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
||||||
<circle
|
/>
|
||||||
class="ant-spin-dot-circle"
|
</svg>
|
||||||
cx="50"
|
</span>
|
||||||
cy="50"
|
|
||||||
r="40"
|
|
||||||
stroke-width="20"
|
|
||||||
style="stroke-dasharray: 0 251.32741228718342; stroke-dashoffset: 62.83185307179586;"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -619,10 +587,10 @@ exports[`renders components/spin/demo/size.tsx extend context correctly 2`] = `[
|
|||||||
|
|
||||||
exports[`renders components/spin/demo/tip.tsx extend context correctly 1`] = `
|
exports[`renders components/spin/demo/tip.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-flex ant-flex-gap-small"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
|
|||||||
@ -31,130 +31,116 @@ exports[`renders components/spin/demo/basic.tsx correctly 1`] = `
|
|||||||
|
|
||||||
exports[`renders components/spin/demo/custom-indicator.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/custom-indicator.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-align-center ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
role="img"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
aria-label="loading"
|
||||||
aria-live="polite"
|
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||||
class="ant-spin ant-spin-spinning"
|
role="img"
|
||||||
|
style="font-size:48px"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
aria-label="loading"
|
aria-hidden="true"
|
||||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
data-icon="loading"
|
||||||
role="img"
|
fill="currentColor"
|
||||||
style="font-size:48px"
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
width="1em"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-hidden="true"
|
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||||
data-icon="loading"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
focusable="false"
|
</span>
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/delayAndDebounce.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/delayAndDebounce.tsx correctly 1`] = `
|
||||||
Array [
|
<div
|
||||||
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
>
|
>
|
||||||
@ -182,10 +168,8 @@ Array [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>
|
||||||
<div
|
<p>
|
||||||
style="margin-top:16px"
|
|
||||||
>
|
|
||||||
Loading state：
|
Loading state：
|
||||||
<button
|
<button
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
@ -207,8 +191,8 @@ Array [
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>,
|
</p>
|
||||||
]
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
|
||||||
@ -255,7 +239,9 @@ Array [
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/nested.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/nested.tsx correctly 1`] = `
|
||||||
Array [
|
<div
|
||||||
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
>
|
>
|
||||||
@ -283,10 +269,8 @@ Array [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>
|
||||||
<div
|
<p>
|
||||||
style="margin-top:16px"
|
|
||||||
>
|
|
||||||
Loading state：
|
Loading state：
|
||||||
<button
|
<button
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
@ -308,131 +292,115 @@ Array [
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>,
|
</p>
|
||||||
]
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders components/spin/demo/percent.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/percent.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
class="ant-flex ant-flex-align-center ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
class="ant-space-item"
|
aria-checked="false"
|
||||||
>
|
class="ant-switch"
|
||||||
<button
|
role="switch"
|
||||||
aria-checked="false"
|
type="button"
|
||||||
class="ant-switch"
|
|
||||||
role="switch"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-switch-handle"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner-checked"
|
|
||||||
>
|
|
||||||
Auto
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-switch-inner-unchecked"
|
|
||||||
>
|
|
||||||
Auto
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
aria-busy="true"
|
class="ant-switch-handle"
|
||||||
aria-live="polite"
|
/>
|
||||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-switch-inner-checked"
|
||||||
>
|
>
|
||||||
<span
|
Auto
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span
|
||||||
|
class="ant-switch-inner-unchecked"
|
||||||
|
>
|
||||||
|
Auto
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-spin-dot-holder"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="ant-spin-dot-item"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
class="ant-spin-dot-holder"
|
||||||
aria-live="polite"
|
|
||||||
class="ant-spin ant-spin-spinning"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
>
|
>
|
||||||
<span
|
<i
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
class="ant-spin-dot-item"
|
||||||
>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-space-item"
|
aria-busy="true"
|
||||||
|
aria-live="polite"
|
||||||
|
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
aria-busy="true"
|
class="ant-spin-dot-holder"
|
||||||
aria-live="polite"
|
|
||||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-spin-dot-holder"
|
class="ant-spin-dot ant-spin-dot-spin"
|
||||||
>
|
>
|
||||||
<span
|
<i
|
||||||
class="ant-spin-dot ant-spin-dot-spin"
|
class="ant-spin-dot-item"
|
||||||
>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
<i
|
||||||
class="ant-spin-dot-item"
|
class="ant-spin-dot-item"
|
||||||
/>
|
/>
|
||||||
<i
|
|
||||||
class="ant-spin-dot-item"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -524,10 +492,10 @@ exports[`renders components/spin/demo/size.tsx correctly 1`] = `
|
|||||||
|
|
||||||
exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
|
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-flex ant-flex-gap-small"
|
class="ant-flex ant-flex-gap-middle"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-spin-nested-loading"
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { LoadingOutlined } from '@ant-design/icons';
|
import { LoadingOutlined } from '@ant-design/icons';
|
||||||
import { Space, Spin } from 'antd';
|
import { Flex, Spin } from 'antd';
|
||||||
|
|
||||||
const App: React.FC = () => (
|
const App: React.FC = () => (
|
||||||
<Space>
|
<Flex align="center" gap="middle">
|
||||||
<Spin indicator={<LoadingOutlined spin />} size="small" />
|
<Spin indicator={<LoadingOutlined spin />} size="small" />
|
||||||
<Spin indicator={<LoadingOutlined spin />} />
|
<Spin indicator={<LoadingOutlined spin />} />
|
||||||
<Spin indicator={<LoadingOutlined spin />} size="large" />
|
<Spin indicator={<LoadingOutlined spin />} size="large" />
|
||||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
|
<Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
|
||||||
</Space>
|
</Flex>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Alert, Spin, Switch } from 'antd';
|
import { Alert, Flex, Spin, Switch } from 'antd';
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [loading, setLoading] = React.useState<boolean>(false);
|
const [loading, setLoading] = React.useState<boolean>(false);
|
||||||
return (
|
return (
|
||||||
<>
|
<Flex gap="middle" vertical>
|
||||||
<Spin spinning={loading} delay={500}>
|
<Spin spinning={loading} delay={500}>
|
||||||
<Alert
|
<Alert
|
||||||
type="info"
|
type="info"
|
||||||
@ -12,11 +12,11 @@ const App: React.FC = () => {
|
|||||||
description="Further details about the context of this alert."
|
description="Further details about the context of this alert."
|
||||||
/>
|
/>
|
||||||
</Spin>
|
</Spin>
|
||||||
<div style={{ marginTop: 16 }}>
|
<p>
|
||||||
Loading state：
|
Loading state：
|
||||||
<Switch checked={loading} onChange={setLoading} />
|
<Switch checked={loading} onChange={setLoading} />
|
||||||
</div>
|
</p>
|
||||||
</>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Alert, Spin, Switch } from 'antd';
|
import { Alert, Flex, Spin, Switch } from 'antd';
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [loading, setLoading] = React.useState<boolean>(false);
|
const [loading, setLoading] = React.useState<boolean>(false);
|
||||||
return (
|
return (
|
||||||
<>
|
<Flex gap="middle" vertical>
|
||||||
<Spin spinning={loading}>
|
<Spin spinning={loading}>
|
||||||
<Alert
|
<Alert
|
||||||
type="info"
|
type="info"
|
||||||
@ -12,11 +12,11 @@ const App: React.FC = () => {
|
|||||||
description="Further details about the context of this alert."
|
description="Further details about the context of this alert."
|
||||||
/>
|
/>
|
||||||
</Spin>
|
</Spin>
|
||||||
<div style={{ marginTop: 16 }}>
|
<p>
|
||||||
Loading state：
|
Loading state：
|
||||||
<Switch checked={loading} onChange={setLoading} />
|
<Switch checked={loading} onChange={setLoading} />
|
||||||
</div>
|
</p>
|
||||||
</>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +1,25 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Space, Spin, Switch } from 'antd';
|
import { Flex, Spin, Switch } from 'antd';
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
const [auto, setAuto] = React.useState(false);
|
const [auto, setAuto] = React.useState(false);
|
||||||
const [percent, setPercent] = React.useState(-50);
|
const [percent, setPercent] = React.useState(-50);
|
||||||
|
const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const timeout = setTimeout(() => {
|
timerRef.current = setTimeout(() => {
|
||||||
setPercent((v) => {
|
setPercent((v) => {
|
||||||
const nextPercent = v + 5;
|
const nextPercent = v + 5;
|
||||||
return nextPercent > 150 ? -50 : nextPercent;
|
return nextPercent > 150 ? -50 : nextPercent;
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 100);
|
||||||
return () => {
|
return () => clearTimeout(timerRef.current);
|
||||||
clearTimeout(timeout);
|
|
||||||
};
|
|
||||||
}, [percent]);
|
}, [percent]);
|
||||||
|
|
||||||
const mergedPercent = auto ? 'auto' : percent;
|
const mergedPercent = auto ? 'auto' : percent;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space>
|
<Flex align="center" gap="middle">
|
||||||
<Switch
|
<Switch
|
||||||
checkedChildren="Auto"
|
checkedChildren="Auto"
|
||||||
unCheckedChildren="Auto"
|
unCheckedChildren="Auto"
|
||||||
@ -33,7 +32,7 @@ const App: React.FC = () => {
|
|||||||
<Spin percent={mergedPercent} size="small" />
|
<Spin percent={mergedPercent} size="small" />
|
||||||
<Spin percent={mergedPercent} />
|
<Spin percent={mergedPercent} />
|
||||||
<Spin percent={mergedPercent} size="large" />
|
<Spin percent={mergedPercent} size="large" />
|
||||||
</Space>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -3,3 +3,5 @@
|
|||||||
自定义描述文案。
|
自定义描述文案。
|
||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
|
Customize the description text.
|
||||||
|
|||||||
@ -10,8 +10,8 @@ const contentStyle: React.CSSProperties = {
|
|||||||
const content = <div style={contentStyle} />;
|
const content = <div style={contentStyle} />;
|
||||||
|
|
||||||
const App: React.FC = () => (
|
const App: React.FC = () => (
|
||||||
<Flex gap="small" vertical>
|
<Flex gap="middle" vertical>
|
||||||
<Flex gap="small">
|
<Flex gap="middle">
|
||||||
<Spin tip="Loading" size="small">
|
<Spin tip="Loading" size="small">
|
||||||
{content}
|
{content}
|
||||||
</Spin>
|
</Spin>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user