React 动态创建并展示整页loading效果

VIP文章英俊潇洒美少年

已于 2023-05-22 10:19:34 修改

阅读量593

点赞数

文章标签： react.js javascript 前端

于 2023-04-04 17:45:40 首次发布

本文链接：https://blog.csdn.net/weixin_45549481/article/details/129958618

版权

整页Loading效果

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Spin } from 'choerodon-ui/pro';
import {
    Size } from 'choerodon-ui/lib/_util/enum';
import './loading.less'
import $ from 'jquery';

/**
 * zhy created Loading Component
 * 具体使用，
 * 1. import showLoading from '@common/utils/Loading';
 * 2. const hideLoading = showLoading({size: Size.small, tip: '加载中'});
 * 3. hideLoading();
 */
interface LoadingProp {
   
  size?: Size; //? 组件大小，可选值为 small default large，默认“large”
  tip?: string; //? 描述文案，默认“加载中，请稍等...”
}

const Loading: React.FC<LoadingProp> = (props) => {
   
  const {
    size = Size.large,