Angular5, показать значок счетчика при загрузке приложения на угловой на главной странице - PullRequest
Новая
       11

Angular5, показать значок счетчика при загрузке приложения на угловой на главной странице

0 голосов
/ 12 сентября 2018

Я пытаюсь показать значок счетчика в центре, когда мы загружаем страницу входа в угловое приложение

Ниже приведен мой код 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, пытаясь центрировать его с помощью начальной загрузки

1 Ответ

0 голосов
/ 13 сентября 2018

Самый простой способ - использовать 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>
...