Skip to content

Add Angular Splash Screen

Posted in Javascript

Twitter’s Progressive Web Application has this beautiful splash screen. Splash screens are awesome. In a PWA, having a splash screen mimics how a native application boots up.

Here’s Twitter’s splash screen:

Twitter’s PWA Splash screen

To see Twitter’s splash screen in action, visit https://mobile.twitter.com

And here’s what we hope to accomplish:

KhoPhi Splash Screen

To see KhoPhi’s splash screen in action, visit… oh wait, we’re in closed beta now. The link will be added soon.

Let’s add that feature to our application, shall we?

Our Splash Screen

Let’s follow these basic steps to bring up our application.

  • Using Angular ng cli, create a new project (ng new myProject --mobile)
  • In the project directory, let’s add the service worker (npm install @angular/service-worker) – This is optional, but useful, to prevent our logo for the splash screen loading from the network all the time. Plus, what is PWA without offline support?
  • Add this line: "serviceWorker": true, somewhere within your angular-cli.jsonfile.

Now, open your index.html and let’s add the loading functionality. You will find this piece in your index.html, just after creating your project:

Right off the bat, you’ll notice the <app-root>Loading...</loading>part would be replaced eventually when Angular initializes. This isn’t news. That’s the way it happens.

Now, instead of the boring looking Loading... thing, we could put something interesting, like this pure CSS Loading spinner from http://cssload.net/en/spinners

There are some amazing pure CSS spinners on the site. Let’s go with the Windows8 loading spinner.

It is important to add the entire CSS of the spinner you choose within the index.html. There is no need to make, yet another network request just pull a resource that’s supposed to be present for a splash screen.

With that in mind, let us tweak our index.html with the spinner in between the <app-root> ... </app-root>. We know everything within that will be replaced entirely after Angular is fully loaded.

You should notice there this part:

If you’re using a front-end CSS framework like Bootstrap, you might be tempted to use their margining classes, like my-5 or the like.

Any of that sort added will not be applied, as at the time of the load of index.html, Bootstrap or whatever your frontend CSS is, isn’t fully loaded i.e, if you added your CSS within the angular-cli.json

I used an .svg file for the logo in my case, to save size. With SVG, the file sizes can be as minimal in size as possible, however, can be scaled to big or even bigger without losing quality.

You could even make your SVG file into a data URI (base64) even making it faster.

Conclusion

Fire up the Angular app with ng serve -o and enjoy the experience in the browser.

Hope you enjoyed this one. See you in the next.