Angular，在主页上加载 Angular 应用程序时显示微调器图标答案

【问题标题】：Angular5, show spinner icon on load of angular app at Main pageAngular，在主页上加载 Angular 应用程序时显示微调器图标
【发布时间】：2018-09-13 15:38:19
【问题描述】：

当我们加载 Angular 应用登录页面时，我试图在中心显示微调器图标

下面是我的 Angular 应用程序的 index.html 代码

   <!doctype html>
    <html>
    <head lang="en">
      <meta charset="utf-8">
      <base href="./">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <link rel="icon" type="image/x-icon" href="favicon.ico">


    </head>
    <body>
<style>
    .container{
        height:100%;
    }
    html, body {
        height:100%;
    }
 </style>

    <angular-app>
      <div class="container">
        <div class="row h-100">
            <div class="col-sm-12 my-auto">
                <div class="w-25 mx-auto">  <i class="fa fa-spinner fa-spin fa-5x fa-fw loading-icon"></i></div>
            </div>
        </div>
    </div>
    </angular-app>


    </body>
    </html>

微调器图标在硬刷新时出现，而不是在正常刷新时出现，但如果我使用一些文本（如加载），那么它甚至会在正常刷新时出现。另外，我试图使微调器居中，它即将进行硬刷新，但在左侧，我不想使用任何 CSS，尝试使用引导程序将其居中

【问题讨论】：

首先你需要加载引导程序。 getbootstrap.com/docs/4.1/getting-started/introduction
stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/…" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> ...... ...................................我添加了这个链接，但没有改变
另外你需要添加fontawesome fontawesome.com/how-to-use/on-the-web/setup/…
谢谢，它现在可以工作了，但是我给类文本中心，它只适用于硬刷新
他不需要引导程序。他只需要fontawesome

标签： angular font-awesome

【解决方案1】：

最简单的方法是使用pace.js

https://github.hubspot.com/pace/docs/welcome/

Pace 将自动监控您的 ajax 请求、事件循环延迟、文档就绪状态以及页面上的元素以决定进度。在 ajax 导航上它将重新开始！

为了快速开始，只需将一个库添加到您的项目并添加到您的 Index.html：

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

【讨论】：