自定义加载中Icon Spin——表格的loading和页面的loading

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<CustomIconComponentProps>) => (
  <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';

<Table

loading={{
                spinning: dataLoading,
                indicator: <LoadingSpinnerIcon style={{ marginTop: '120px' }} />
              }}

{...其他}

/>

页面应用：

import LoadingSpinnerIcon from '@components/loading-spinner';

const antIcon = <LoadingSpinnerIcon />;

 <Spin size='large' spinning={loading} indicator={antIcon}>
          <div className={styles['nobox']}></div>
 </Spin>