CODEWITHSUNDEEP
javascriptangularangular5
vladanPro
vladanPro

Reputation: 513

Angular5: loading spinner before load page

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.

Upvotes: 1

Views: 4357

Answers (3)

mutantkeyboard
mutantkeyboard

Reputation: 1724

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>

Upvotes: 1

user4676340
user4676340

Reputation:

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

Upvotes: 0

Farasi78
Farasi78

Reputation: 1011

Have you tried putting your spinner in the HTML page on the server side (i.e. index.hbs or whatever templating engine you're using) between your app tags?

E.g:

<my-app> 
  spinner code
</my-app>

It will show it while loading.

Upvotes: 2

Related Questions