<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1
</title>
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
<!-- Load libraries (including polyfill(s) for older browsers. -->
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc1/node_modules/core-js/client/shim.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc1/node_modules/zone.js/dist/zone.js"></script>
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc1/node_modules/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src="../../vendor/angularjs-2-beta/rc1/node_modules/systemjs/dist/system.src.js"></script>
<!-- Configure SystemJS loader. -->
<script type="text/javascript" src="./system.config.js"></script>
</head>
<body>
<h1>
Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1
</h1>
<my-app>
Loading...
</my-app>
<div id="pre-bootstrap-container">
<!--
In this approach, rather than putting the pre-bootstrap content inside
the <my-app> component content, we're leaving it external to the Angular 2
application entirely. Then, we're hooking into the bootstrap promise in
order to programmatically remove the pre-bootstrap content once the
application has bootstrapped. This gives us more fine-grained control over
how the pre-bootstrap content is removed.
-->
<script type="text/javascript">
// CAUTION: "bootstrapping" promise exposed by our System.js logic.
window.bootstrapping.then(
function handleResolve() {
var preBootstrapContainer = document.getElementById( "pre-bootstrap-container" );
var preBootstrap = document.getElementById( "pre-bootstrap" );
// Add the class-name to initiate the transitions.
preBootstrap.className = "loaded";
// Remove the bootstrap container after the transition has
// completed (based on the known transition time).
setTimeout(
function removeLoadingScreen() {
preBootstrapContainer
.parentNode
.removeChild( preBootstrapContainer )
;
},
300
);
}
);
</script>
<style type="text/css">
#pre-bootstrap {
background-color: #262626 ;
bottom: 0px ;
left: 0px ;
opacity: 1.0 ;
position: fixed ;
right: 0px ;
top: 0px ;
transition: all linear 300ms ;
-webkit-transition: all linear 300ms ;
z-index: 999999 ;
}
#pre-bootstrap.loaded {
opacity: 0.0 ;
}
#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>
</div>
</body>
</html>