Javascript 如何在React应用程序完成加载之前显示完整页面加载程序/微调器

如何使fullpage loader/spinner首先加载，然后显示，直到React（或不同的基于JS的框架）应用程序完全加载

“满载”是指浏览器的旋转器停止旋转的时刻

我在为非js呈现的网站制作加载程序/微调器，但我不知道如何为js呈现的应用程序制作它们

---

我如何知道根div何时充满了满载的React app？

您可以在任何SPA（通常是

root

或

app

）的div中插入一个加载符号

index.html

）。这将在加载完整应用程序后立即覆盖。例如，在

index.html

的

head

标记中放置以下样式

.装货{
显示：内联块；
宽度：30px；
高度：30px；
边框：2倍实心rgba（0,0,0,2）；
边界半径：50%；
边框顶部颜色：rgba（0,0,0,4）；
动画：旋转1秒轻松进出无限；
-webkit动画：旋转1s轻松输入输出无限；
左：钙（50%）；
顶部:钙(50%);；
位置：固定；
z指数：1；
}
@关键帧旋转{
到{-webkit变换：旋转（360度）；}
}
@-webkit关键帧旋转{
到{-webkit变换：旋转（360度）；}
}

并将以下内容放在身体标签内

您需要启用JavaScript才能运行此应用程序。