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

我有一个有角度的页面，可以在本地驱动器上加载一些内容。因此，它在没有Web服务器的情况下运行。有时它的加载时间很长（10秒）

我试图实现jquery加载动画，但即使是jquery加载动画也会在从JS加载正常内容之后启动

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

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

---

谢谢。

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

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

<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>

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

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

<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>

.加载器{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；/*Safari*/
动画：旋转2s线性无限；
}
/*狩猎*/
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

---

当angular成功加载后，应用程序根组件中的代码将替换为原始内容。

Hello！欢迎来到StackOverflow！你试了什么？嘿，我试着把它放到HTML文件中，但它不起作用。你必须知道，所有东西都是通过Web服务器本地托管的。只是在一个文件夹中，我的chrome和IE并不是不安全的。它在公司网络中。我也在和iframes一起工作！我非常有限，这就是为什么我使用angular而不是PHP和mysql的原因。因此，我在.html文件中添加了头和头之间的CSS。不工作：/1更多信息：我正在使用AngularCode.angularjs.org/1.2.0-rc.3/angular.min.js“>这意味着您的AppComponent没有花时间加载。请附上浏览器开发工具的网络标签的截图对不起，我已经提供了Angular 2、4、5和6的代码，因为你在开发工具的网络标签上给了我提示，所以我自己修复了它。我看到哪些部分的计时时间最长，并将其删除或更改。。或者只是把它们保存在同一个文件夹中！！！谢谢！