angular 加载内容时加载动画

Question

我有一个 angular 页面，它在本地驱动器上加载了一些内容。所以它运行没有网络服务器。有时它的加载很安静（10 秒）。

我尝试实现了一个jquery加载动画，但是即使jquery加载动画也是在从JS加载正常内容后开始的。

这是页面在加载我的 angular 内容时的样子：

如何实现加载微调器或文本，而不是显示原始的 {{example.example}} 值？

谢谢。

Answer 1

在 angular 加载之前，您可以在 index.html 页面上显示您的加载程序，而无需任何 javascript 代码。只需将以下代码粘贴到您的 index.html

<app-root>
<div class="loader"></div>
</app-root>

将以下代码粘贴到 index.html

的 header 标签中

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

当 angular 加载成功后 app-root 组件中的代码将被替换为原始内容。

angular 加载内容时加载动画

angular loading animation while content is loading

javascript

jquery

loading

angular