Angular Splash Screen

When an Angular application first loads, visitors may see a blank white screen. Depending on the visitor’s network speed, that white screen could be there a little longer than expected. Let’s display something for the visitor indicating something is happening before they decide to leave!

Splash Screen Image

Within the index.html file of your Angular application, you’ll see the app-root element. You can put anything you want inside that element and it will appear as the splash screen prior to the app loading! Don’t worry about removing it later. Angular will take care of that for you, removing any content inside of app-root after successfully loading the app.

<app-root></app-root>

Let’s display an image that’s centered on the page and animates! Define an id called splash on the image, which will be used to help position and animate the image with CSS.

<app-root>
  <img id="splash" src="./assets/pokeball.png">
</app-root>

Splash Screen Image CSS

Create a keyframes animation called spin that will rotate from 0 to 359 degrees.

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

The splash id uses the spin animation over a duration of 5 seconds and plays in an infinite loop with the same speed from start to finish. The image is positioned in the exact center of the page.

#splash {
  animation: spin 5s infinite linear;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

The CSS can be placed within the app-root element as well.

<app-root>

  <style>

    #splash {

      animation: spin 5s infinite linear;

      margin: auto;

      position: absolute;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

    }

<span class="k">@keyframes</span> <span class="n">spin</span> <span class="p">{</span>
  <span class="nt">from</span> <span class="p">{</span>
    <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">0deg</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nt">to</span> <span class="p">{</span>
    <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">359deg</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>



    

    




</style>

  <img id="splash" src="./assets/pokeball.png">

</app-root>

Splash Screen

The splash screen can be tough to see if you have a very fast network. Luckily, browsers have some helpful developer tools that can help with that.

If you’re using Google Chrome, you can open the Developer Tools by right clicking anywhere on the page and choosing Inspect. Select the Network tab and change the Throttling option from Online to Slow 3G.

Refresh the page and it will reload but much slower than before. You can easily see the splash screen at that point!

To see a demo of a splash screen, visit our Pokemon application and use the steps from above!

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!