2023-10-20 16:28:24 +08:00
|
|
|
import React from 'react';
|
2023-10-19 13:47:48 +08:00
|
|
|
import { Button, Spin } from 'antd';
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
2024-06-03 11:30:27 +08:00
|
|
|
const [spinning, setSpinning] = React.useState(false);
|
|
|
|
const [percent, setPercent] = React.useState(0);
|
2023-10-19 13:47:48 +08:00
|
|
|
|
|
|
|
const showLoader = () => {
|
2023-10-20 16:28:24 +08:00
|
|
|
setSpinning(true);
|
2024-06-03 11:30:27 +08:00
|
|
|
let ptg = -10;
|
|
|
|
|
|
|
|
const interval = setInterval(() => {
|
|
|
|
ptg += 5;
|
|
|
|
setPercent(ptg);
|
|
|
|
|
|
|
|
if (ptg > 120) {
|
|
|
|
clearInterval(interval);
|
|
|
|
setSpinning(false);
|
|
|
|
setPercent(0);
|
|
|
|
}
|
|
|
|
}, 100);
|
2023-10-19 13:47:48 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2024-06-03 11:30:27 +08:00
|
|
|
<Button onClick={showLoader}>Show fullscreen</Button>
|
|
|
|
<Spin spinning={spinning} percent={percent} fullscreen />
|
2023-10-19 13:47:48 +08:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|