ant-design/components/spin/demo/fullscreen.tsx
二货爱吃白萝卜 0352b2fd2e
feat: Spin support percent (#48657)
* feat: spin support ptg

* chore: ptg

* chore: update demo

* chore: popout component

* chore: adjust logic

* test: update snapshot

* test: update snapshot

* docs: update docs

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: back of snapshot

* chore: clean up

* test: fix test case

* chore: fix types

* test: update snapshot

* chore: opt

* test: update testcase

* test: coverage

* test: update snapshot
2024-06-03 11:30:27 +08:00

33 lines
670 B
TypeScript

import React from 'react';
import { Button, Spin } from 'antd';
const App: React.FC = () => {
const [spinning, setSpinning] = React.useState(false);
const [percent, setPercent] = React.useState(0);
const showLoader = () => {
setSpinning(true);
let ptg = -10;
const interval = setInterval(() => {
ptg += 5;
setPercent(ptg);
if (ptg > 120) {
clearInterval(interval);
setSpinning(false);
setPercent(0);
}
}, 100);
};
return (
<>
<Button onClick={showLoader}>Show fullscreen</Button>
<Spin spinning={spinning} percent={percent} fullscreen />
</>
);
};
export default App;