定义变量

export interface LoadingProps {
  /**
   * @description 自定义描述文本
   * @default 加载中...
   */
  text?: string;
  /**
   * @description 设置遮罩层颜色
   * @default
   */
  backColor?: any;
  /**
   * @description 背景颜色
   * @default
   */
  background?: string;
  /**
   * @description 容器中居中显示
   * @default
   */
  center?: boolean;
  /**
   * @description 设置加载器尺寸
   * @default  md
   */
  size?: string | 'xs' | 'sm' | 'md' | 'lg';
}

实现方式

import React, { FC, memo, useMemo } from 'react';
import { LoadingProps } from './interface';
import Css from './index.module.less';

const Loading: FC<LoadingProps> = memo((props) => {
  const { size, text, center, backColor } = props;
  const LoadingStyle = useMemo(() => {
    if (!size && size !== 'lg' && size !== 'md' && size !== 'sm' && size !== 'xs') {
      return 'md';
    }

    return size as any;
  }, [size]);
  const Center = useMemo(() => {
    if (!center) {
      return '';
    }
    return 'center ';
  }, [center]);
  const bgColor = useMemo(() => {
    let Color = {
      background: '',
    };
    if (backColor) {
      Color.background = backColor;
    }
    return Color;
  }, [center]);
  return (
    <div className={[Css[LoadingStyle], Css['default']].join(' ')} style={bgColor}>
      <div className={[Css[Center], Css['el']].join(' ')}>
        <span className={Css['loader']}></span>
        <p>{text}</p>
      </div>
    </div>
  );
});

export default Loading;

主要思路

用遮罩层的方式实现，并且用用户的自定的方式来实现，loading动画