我使用的是react-progress-2 npm包，它是零依赖的，在ReactJS中工作得很好。

https://github.com/milworm/react-progress-2

安装:

NPM安装react-progress-2

在项目中包含react-progress-2/main.css。

导入“node_modules / react-progress-2 / main.css”;

包括react-progress-2，并把它放在顶部组件的某个地方，例如:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

现在，无论何时你需要显示一个指示器，只需调用Progress.show()，例如:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

请注意，show和hide调用是堆叠的，因此在n个连续的show调用之后，您需要执行n个hide调用来隐藏一个指示器，或者您可以使用Progress.hideAll()。

我最近不得不处理这个问题，并想出了一个解决方案，这对我来说很好。然而，我已经尝试了上面的@Ori Drori解决方案，不幸的是，它并没有正确工作(有一些延迟+我不喜欢setTimeout函数的使用)。

这是我想到的:

index . html文件

内头标签-指示器的样式:

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

现在是body标签:

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

然后是一个非常简单的逻辑，在app.js文件中(在渲染函数中):

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

它是如何工作的?

当第一个组件(在我的应用程序中，大多数情况下是app.js)正确安装时，旋转器将被隐藏，并应用隐藏属性给它。

更重要的是补充什么- spinner. hasattribute ('hidden')条件阻止在每次组件挂载时向spinner添加隐藏属性，因此实际上它只会在整个应用程序加载时添加一次。

我使用的是react-progress-2 npm包，它是零依赖的，在ReactJS中工作得很好。

https://github.com/milworm/react-progress-2

安装:

NPM安装react-progress-2

在项目中包含react-progress-2/main.css。

导入“node_modules / react-progress-2 / main.css”;

包括react-progress-2，并把它放在顶部组件的某个地方，例如:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

现在，无论何时你需要显示一个指示器，只需调用Progress.show()，例如:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

请注意，show和hide调用是堆叠的，因此在n个连续的show调用之后，您需要执行n个hide调用来隐藏一个指示器，或者您可以使用Progress.hideAll()。

你可以通过在react中使用惰性加载轻松做到这一点。 为此你必须使用惰性和悬疑反应。

import React, { lazy, Suspense } from 'react';

const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

export default loadable;

然后像这样导出你的组件。

export const TeacherTable = loadable(() =>
  import ('./MainTables/TeacherTable'), {
    fallback: <Loading />,
  });

然后在你的路由文件中像这样使用它。

 <Route exact path="/app/view/teachers" component={TeacherTable} />

这就是现在你很好去每次你的DOM渲染你的加载组件将显示为我们已经在上面的fallback属性中指定。只要确保你只在componentDidMount()中做任何ajax请求

当你的React应用程序是巨大的，它真的需要时间来启动和运行后，页面已经加载。比如，你将应用的React部分挂载到#app上。通常，index.html中的这个元素只是一个空的div:

<div id="app"></div>

你可以做的是放一些样式和一堆图像，让它在页面加载和初始React应用程序渲染到DOM之间看起来更好:

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

页面加载后，用户将立即看到index.html的原始内容。不久之后，当React准备好将呈现的组件的整个层次结构挂载到这个DOM节点时，用户将看到实际的应用程序。

注意class，而不是className。这是因为你需要把它放到html文件中。

如果你使用SSR，事情就不那么复杂了，因为用户会在页面加载后立即看到真正的应用程序。

这可以通过在html文件(例如index.html)中放置加载图标来实现，这样用户就可以在html文件加载后立即看到图标。

当你的应用程序完成加载时，你可以简单地删除生命周期钩子中的加载图标，我通常在componentDidMount中这样做。