如何在 React App 完成加载之前显示整页加载器/微调器答案

【问题标题】：How to show fullpage loader/spinner before React App finish loading如何在 React App 完成加载之前显示整页加载器/微调器
【发布时间】：2020-06-09 15:52:08
【问题描述】：

如何制作将首先加载然后显示直到 React（或其他基于 JS 的框架）应用程序完全加载的整页加载器/微调器。

“完全加载”是指浏览器的微调器停止旋转的那一刻。

我正在为非 js 渲染的网站制作这些加载器/微调器，但我不确定如何为 JS 渲染的应用程序制作它们。

我如何知道根 div 何时被完全加载的 React 应用程序填充？

【问题讨论】：

标签： javascript html css reactjs web-applications

【解决方案1】：

您可以在分配给任何 SPA（通常为 root 或 app）的 div 中的 index.html 中放置加载符号。一旦加载完整的应用程序，这将被覆盖。例如，在index.html 的head 标签内添加如下样式。

<style>
    .loading {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0,0,0,.2 );
        border-radius: 50%;
        border-top-color: rgba(0,0,0,.4 );
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        left: calc(50%);
        top: calc(50%);
        position: fixed;
        z-index: 1;
        }

        @keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
        @-webkit-keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
</style>

并将以下内容放在body标签内。

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="app">
        <div class="loading"></div>
    </div>
</body>

【讨论】：