内容加载时的角度加载动画

Question

我有一个角度页面，该页面将一些内容加载到本地驱动器上。因此，它无需网络服务器即可运行。有时它的加载时间很长（10秒）。

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

这是页面加载我的角度内容时的外观：

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

谢谢。

Answer 1

在进行角度加载之前，您可以在index.html页面上显示加载器，而无需任何JavaScript代码。只需将以下代码粘贴到index.html

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

将以下代码粘贴到index.html的标头标记中

<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组件中的代码将替换为原始内容。