直接贴代码
index.tsx:
import Icon from '@ant-design/icons';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import React from 'react';
import styles from './index.module.less';
**const LoadingSvg = () => (
<div className={styles['data-loading-spinner']} />
);
const LoadingIcon = (props: Partial) => (
<Icon component={LoadingSvg} {...props} />
);
const LoadingSpinnerIcon: React.FC = (props: ISafeAny) => (
< LoadingIcon {...props} />
);
export default LoadingSpinnerIcon;**
index.module.less:
.data-loading-spinner{
background: url('../../assets/icons/loading.svg') no-repeat;
background-size: cover;
height: 40px;
width: 40px;
border-radius:50%;
top: 48%;
left: 48%;
-webkit-animation: rotate-loading 1s linear infinite;
animation: rotate-loading 3s linear infinite;
}
@keyframes rotate-loading {
0% {
-webkit-transform: rotate(
0deg
);
transform: rotate(
0deg
);
}
100% {
-webkit-transform: rotate(
1turn
);
transform: rotate(
1turn
);
}
}
表格里应用：
import LoadingSpinnerIcon from '@components/loading-spinner';
loading={{
spinning: dataLoading,
indicator: <LoadingSpinnerIcon style={{ marginTop: '120px' }} />
}}
{...其他}
/>
页面应用：
import LoadingSpinnerIcon from '@components/loading-spinner';
const antIcon = ;
<div className={styles['nobox']}>
