apex-loading

支持 react 16.8+ 版本

但页面显示加载的时候，不会出现滚动穿透的问题

Installation

npm install apex-loading --save

Properties

Prop	Default	Type	Description
show	true	boolean	是否显示
loadingCom		React组件	加载动画，建议使用apex-loading-animation
opacity	.4	number	背景颜色透明度
message	''	string	加载提示信息
messageSize	17	number	加载提示信息字体大小，单位px
messageBlod	600	number	加载提示信息字体粗细
messageColor	#000000	string	加载提示信息字体颜色

Use

import React, { useState, useEffect } from 'react';
// 加载组件
import Loading from 'apex-loading';
// 加载动画
import {LoadingA} from 'apex-loading-animation'
import 'apex-loading-animation/build/index.css';

export default function App() {

  const [open, setOpen] = useState(true)  // 控制是否显示

  useEffect(() => {
    setTimeout(() => {
      setOpen(false)
    }, 1000)
  }, [])

  return <Loading
    show={open}
    loadingCom={<LoadingA />}
    backColor={"#000000"}
    opacity={.2}
    message="正在加载"
  />
}