title: Angular2 pre-bootstrap loading screen (splash screen) with Webpack
body: <p>How can I implement an splash screen that for example, slowly fades after bootstrapping is complete.</p>
  
  <p>I'm reading <a href="https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm" rel="nofollow noreferrer">this</a> tutorial (the second approach), but it's written for systemjs.</p>
  
  <p>and to save time, I already know this one:</p>
  
  <pre><code>.loading {
      opacity: 0;
      transition: opacity .8s ease-in-out;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
          color: #fff;
      background: #000;
      z-index: -1;
  }
  
  my-app:empty + .loading {
      opacity: 1;
      z-index: 100;
  }
  
  my-app:empty + .loading h1 {
      color: #EEE;
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      transform: translate(0, -50%);
  }
  </code></pre>
  
  <p>that's not clean!</p>