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`] = `
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
style="font-size: 48px;"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
style="font-size: 48px;"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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>
|
||||
`;
|
||||
@ -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/delayAndDebounce.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
@ -186,10 +172,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-top: 16px;"
|
||||
>
|
||||
</div>
|
||||
<p>
|
||||
Loading state：
|
||||
<button
|
||||
aria-checked="false"
|
||||
@ -211,8 +195,8 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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/nested.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
@ -291,10 +277,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-top: 16px;"
|
||||
>
|
||||
</div>
|
||||
<p>
|
||||
Loading state：
|
||||
<button
|
||||
aria-checked="false"
|
||||
@ -316,214 +300,198 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/spin/demo/nested.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/spin/demo/percent.tsx extend context correctly 1`] = `
|
||||
<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
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
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"
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-switch-inner-checked"
|
||||
>
|
||||
<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>
|
||||
Auto
|
||||
</span>
|
||||
<span
|
||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||
class="ant-switch-inner-unchecked"
|
||||
>
|
||||
<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>
|
||||
Auto
|
||||
</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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-spin-dot ant-spin-dot-spin"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-spin-dot ant-spin-dot-spin"
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
class="ant-spin-dot-holder ant-spin-dot-progress ant-spin-dot-holder-hidden"
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
@ -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`] = `
|
||||
<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
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<div
|
||||
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`] = `
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
style="font-size:48px"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin ant-spin-dot"
|
||||
role="img"
|
||||
style="font-size:48px"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
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>
|
||||
<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>
|
||||
`;
|
||||
|
||||
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
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
@ -182,10 +168,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-top:16px"
|
||||
>
|
||||
</div>
|
||||
<p>
|
||||
Loading state：
|
||||
<button
|
||||
aria-checked="false"
|
||||
@ -207,8 +191,8 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
|
||||
@ -255,7 +239,9 @@ Array [
|
||||
`;
|
||||
|
||||
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
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
@ -283,10 +269,8 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-top:16px"
|
||||
>
|
||||
</div>
|
||||
<p>
|
||||
Loading state：
|
||||
<button
|
||||
aria-checked="false"
|
||||
@ -308,131 +292,115 @@ Array [
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/spin/demo/percent.tsx correctly 1`] = `
|
||||
<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
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
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"
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-sm ant-spin-spinning"
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-switch-inner-checked"
|
||||
>
|
||||
<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>
|
||||
Auto
|
||||
</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
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-spin-dot ant-spin-dot-spin"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-lg ant-spin-spinning"
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
>
|
||||
<span
|
||||
class="ant-spin-dot-holder"
|
||||
class="ant-spin-dot ant-spin-dot-spin"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -524,10 +492,10 @@ exports[`renders components/spin/demo/size.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/spin/demo/tip.tsx correctly 1`] = `
|
||||
<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
|
||||
class="ant-flex ant-flex-gap-small"
|
||||
class="ant-flex ant-flex-gap-middle"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { Space, Spin } from 'antd';
|
||||
import { Flex, Spin } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space>
|
||||
<Flex align="center" gap="middle">
|
||||
<Spin indicator={<LoadingOutlined spin />} size="small" />
|
||||
<Spin indicator={<LoadingOutlined spin />} />
|
||||
<Spin indicator={<LoadingOutlined spin />} size="large" />
|
||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
|
||||
</Space>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Alert, Spin, Switch } from 'antd';
|
||||
import { Alert, Flex, Spin, Switch } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
return (
|
||||
<>
|
||||
<Flex gap="middle" vertical>
|
||||
<Spin spinning={loading} delay={500}>
|
||||
<Alert
|
||||
type="info"
|
||||
@ -12,11 +12,11 @@ const App: React.FC = () => {
|
||||
description="Further details about the context of this alert."
|
||||
/>
|
||||
</Spin>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<p>
|
||||
Loading state：
|
||||
<Switch checked={loading} onChange={setLoading} />
|
||||
</div>
|
||||
</>
|
||||
</p>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { Alert, Spin, Switch } from 'antd';
|
||||
import { Alert, Flex, Spin, Switch } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
return (
|
||||
<>
|
||||
<Flex gap="middle" vertical>
|
||||
<Spin spinning={loading}>
|
||||
<Alert
|
||||
type="info"
|
||||
@ -12,11 +12,11 @@ const App: React.FC = () => {
|
||||
description="Further details about the context of this alert."
|
||||
/>
|
||||
</Spin>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<p>
|
||||
Loading state：
|
||||
<Switch checked={loading} onChange={setLoading} />
|
||||
</div>
|
||||
</>
|
||||
</p>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Space, Spin, Switch } from 'antd';
|
||||
import { Flex, Spin, Switch } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [auto, setAuto] = React.useState(false);
|
||||
const [percent, setPercent] = React.useState(-50);
|
||||
const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
React.useEffect(() => {
|
||||
const timeout = setTimeout(() => {
|
||||
timerRef.current = setTimeout(() => {
|
||||
setPercent((v) => {
|
||||
const nextPercent = v + 5;
|
||||
return nextPercent > 150 ? -50 : nextPercent;
|
||||
});
|
||||
}, 100);
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
return () => clearTimeout(timerRef.current);
|
||||
}, [percent]);
|
||||
|
||||
const mergedPercent = auto ? 'auto' : percent;
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Flex align="center" gap="middle">
|
||||
<Switch
|
||||
checkedChildren="Auto"
|
||||
unCheckedChildren="Auto"
|
||||
@ -33,7 +32,7 @@ const App: React.FC = () => {
|
||||
<Spin percent={mergedPercent} size="small" />
|
||||
<Spin percent={mergedPercent} />
|
||||
<Spin percent={mergedPercent} size="large" />
|
||||
</Space>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,3 +3,5 @@
|
||||
自定义描述文案。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the description text.
|
||||
|
||||
@ -10,8 +10,8 @@ const contentStyle: React.CSSProperties = {
|
||||
const content = <div style={contentStyle} />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex gap="small" vertical>
|
||||
<Flex gap="small">
|
||||
<Flex gap="middle" vertical>
|
||||
<Flex gap="middle">
|
||||
<Spin tip="Loading" size="small">
|
||||
{content}
|
||||
</Spin>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user