Pre-bootstrap loading screen

I can suggest a simple CSS approach.

First of all add .loading div into main HTML page, it should follow main app component element. For example:

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

Now you can target and style splash screen with my-app:empty + .loading CSS selector, and make it disappear as soon as the app gets bootstraped. Example:

/* 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: #000;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

This approach works better if you put all heavy scripts before closing body tag and leave just minimal styles necessary to the loading screen in the head so it shows up as soon as possible and then scripts start to load.

Here is a simple demo:

Demo: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

I went with a simple approach (I did like the other answer though too) using FontAwesome spinners:

<app-root>
    <div class="text-center">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
    </div>
</app-root>

Why not try this approach:

<app-root>
    <style type="text/css">
        #pre-bootstrap {
            background-color: #262626;
            bottom: 0px;
            left: 0px;
            position: fixed;
            right: 0px;
            top: 0px;
            z-index: 999999;
        }

        #pre-bootstrap div.messaging {
            color: #FFFFFF;
            font-family: monospace;
            left: 0px;
            margin-top: -37px;
            position: absolute;
            right: 0px;
            text-align: center;
            top: 50%;
        }

        #pre-bootstrap h1 {
            font-size: 26px;
            line-height: 35px;
            margin: 0px 0px 20px 0px;
        }

        #pre-bootstrap p {
            font-size: 18px;
            line-height: 14px;
            margin: 0px 0px 0px 0px;
        }
  </style>

  <div id="pre-bootstrap">
    <div class="messaging">
        <h1>
            App is Loading
        </h1>

        <p>
            Please stand by for your ticket to awesome-town!
        </p>

      </div>
   </div>
</app-root>