Show loading animation while module lazy loads?

Question

In my main routes I have my profile module lazy loaded on /profile like so:

  {
      path: '',
      component: HomeComponent
  },
  {
      path: 'profile', loadChildren: './profile/profile.module#ProfileModule'
  },
  {
      path: '**',
      redirectTo: '',
      pathMatch: 'full'
  }

However, my profile module takes ~1.5 - 2 seconds to load which is quite slow. I'd like to show some sort of loading animation while my module loads, is there anyway to do so? I tried doing this:

app.component.html

<!-- other stuff ... -->

<router-outlet></router-outlet>
<div class="loading">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

and inside my css, I had:

  /* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
  .loading {
      opacity: 0;
      transition: opacity .8s ease-in-out;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1B1B1B;
      color: white;
      z-index: -1;
  }
  /* .loading screen is visible when app is not bootstraped yet, .my-app is empty */
  router-outlet:empty + .loading,
  router-outlet:empty + .spinner {
      opacity: 1;
      z-index: 100;
  }  

  /* spinner animation css stuff */

But this doesn't seem to work, Is there anyway to show some loader while angular2 modules are loaded?

Answer 1

router-outlet wont put stuff inside itself , it would put it next to it.

When it's empty :

<router-outlet></router-outlet>

So , when it's loaded , it would be :

<router-outlet></router-outlet>
<your-code></your-code> // which is loaded afterward

So router-outlet:empty shouldn't do anything.

You can say :

  router-outlet + .loading .spinner {
      opacity: 1;
      z-index: 100;
  }