Angular5, show spinner icon on load of angular app at Main page
Question
I am trying to show the spinner icon in the center when we load the angular app login page
Below is my index.html code for an angular app
<!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 icon comes on hard refresh, not on normal refresh, but if I use some text like loading then it will come even on normal refresh. Also, I was trying to center the spinner, it's coming on hard refresh but on the left side, I don't want to use any CSS, trying to center it using bootstrap
1 answers
solution1
-1 2018-09-13 06:19:01
The most simple way is to use pace.js
https://github.hubspot.com/pace/docs/welcome/
Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!
For a fast start just add a library to your project and add to your Index.html:
<head>
<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.