Angular5: loading spinner before load page
Question
Is there way to load loading spinner
[`https://plnkr.co/edit/yhA0AwY9gzd0JsxhDouz?p=preview`][1]
and not on event (click) but on start loading page while application loading, i know that is tricky bcs directive of loading module can't be load before application, but if someone do it maybe in some other way. Thank you.
3 answers
solution1
2 2018-01-17 14:46:38
Have you tried putting your spinner in the HTML page on the server side (ie index.hbs or whatever templating engine you're using) between your app tags?
Eg:
<my-app>
spinner code
</my-app>
It will show it while loading.
solution2
1 ACCPTED 2018-01-17 14:54:24
If you look at -> http://akveo.com/ngx-admin/ , you can see the effect you're looking for.
The way they achieved it is by putting the code bellow <my-app> Loading... </myapp> in the index.html file.
Here is the link to their repo -> https://github.com/akveo/ngx-admin , and the body part of index.html you're looking for looks like:
<body>
<ngx-app>Loading...</ngx-app>
<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden} .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%} .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
<div id="nb-global-spinner" class="spinner">
<div class="blob blob-0"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
</div>
</body>
solution3
0 2018-01-17 14:52:18
I made this plunkr using only CSS.
In your case, you won't be able to do this, since it is an Angular component. You need your application to be loaded to use your components !
What you can do is simply change my CSS (and HTML) code to suit your needs.
Have fun !
//Mandatory plunkr code
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.