AngularJS Loading Indicator / Splash screen

How do we prevent the flash of unrendered content (FOUC)? We don’t want to simply hide the unrendered content from the user since the user may think that the app is broken, especially if they’re on a slow connection. The browser will start to render elements as soon as it encounters them, we can use this to our advantage to display a full-screen block of HTML while the page is loading, i.e. a splash screen.

Full working sample can be found at http://jsfiddle.net/45EfF/.

Let’s start with the markup, I’ve added a splash div at the top of the body-tag and the css is loaded inline in the head-tag. This way, when the browser starts parsing the body-tag it will lay out the splash screen elements and style them before it starts to load any other files.


  Loading
	



  Name 
  


  {{greeting}} {{name}}

We want to make sure that the splash screen goes away after the page is loaded, we can do this using the ngCloak directive. The ngCloak directive will add a CSS class that sets a display: none !important on the element and then remove the display: none once the page has been loaded. We can hijack this ngCloak directive for the splash screen and invert the style for the splash element only.


.splash {
	display: none;
}

[ng-cloak].splash {
	display: block !important;
}
		
.splash {
  position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;	
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000;
}

.splash h2 {
	text-align: center;
	font-size: 4em;
	color:white;			
}

Finally, I’ve manually bootstrapped angular to simulate slow loading.

It’s as simple as that, hope it helped, cheers!