Question

从许多有角度的2个例子中，我们在index.html中看到了这个代码：

<app>loading</app>

这是告诉用户应用程序JavaScripts还没有在浏览器中，所以现在浏览器只是加载这个“加载”文本

我想知道如何将此文本更改为实际的微调器组件。也就是说，当浏览器仍在加载应用程序JavaScripts时如何显示微调器组件？

（最终结果的一个例子就是你在访问LinkedIn.com时看到的内容。在你看到所有内容加载之前，你首先看到所有这些空盒子闪烁。）

Answer 1

我所做的只是在屏幕上显示一个旋转器gif。您可以使用@JonathanNiu提到的字体 - 真棒微调器，或任何其他图标/图像......

<body>
    <my-app>
      <div class="loading-app">
            <img src="./public/img/spin.gif" />
      </div>
    </my-app>
</body>

和css类，它位于我的全局样式文件中：

.loading-app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}