You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
/*
|
|
* @Author: zhoux zhouxia@supervision.ltd
|
|
* @Date: 2023-12-29 14:19:46
|
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
|
* @LastEditTime: 2023-12-29 15:31:14
|
|
* @FilePath: \general-ai-platform-web\src\components\Loading\loadingSpin.tsx
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
*/
|
|
|
|
type LoadingSpinProps = {
|
|
spinning: boolean;
|
|
tip?: string | React.ReactNode;
|
|
indicator?: React.ReactNode;
|
|
};
|
|
/**
|
|
* @加载控件
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
const LoadingSpin: React.FC<LoadingSpinProps> = (props) => {
|
|
return props.spinning ? (
|
|
<div
|
|
style={{
|
|
background: 'transparent',
|
|
position: 'fixed',
|
|
left: 0,
|
|
top: 0,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 999,
|
|
backgroundColor: 'rgba(0,0,0, 0.3)',
|
|
color: 'white',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor: 'white',
|
|
borderRadius: 12,
|
|
width: 361,
|
|
height: 216,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
color: '#154DDD'
|
|
}}
|
|
>
|
|
{props.indicator ? (
|
|
props.indicator
|
|
) : (
|
|
<img style={{ width: 120 }} src="/loading1.gif" alt="" />
|
|
)}
|
|
|
|
<p style={{padding: 8, margin: 0}}>{props.tip || '请稍候...'}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<></>
|
|
);
|
|
};
|
|
|
|
export default LoadingSpin;
|