Angular5，在主页面上加载角应用程序时显示微调器图标

问题描述 投票：0回答：1

我正在尝试在加载角度应用登录页面时在中心显示微调器图标

下面是我的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>

Spinner图标出现硬刷新，而不是正常刷新，但如果我使用像加载这样的文本，那么即使在正常刷新时它也会出现。此外，我试图使微调器居中，它正在进行硬刷新，但在左侧，我不想使用任何CSS，试图使用bootstrap中心

angular font-awesome
1个回答
-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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.