
<!--    Load Screen      -->
<ons-page>
	<div class="content" id="content">
		<center><div style="position: absolute;top: 15%;width:100%"><h1><b><!-- AppName --></b></h1></div></center>
			<div id="bkg"></div>
	
		<ons-bottom-toolbar>
			<ons-progress-bar indeterminate></ons-progress-bar>
			</br>
				<center>Loading...</center>
		</ons-bottom-toolbar>
	</div>

	<!--     Set Load Screen Timeout to load MainPage     -->
	<script>
		setTimeout(myFunction, 4000);

		function myFunction() {
			var tPage = $( '#mainPage' ).html();
			$( '#content' ).html( tPage );
		}
	</script>

</ons-page>

<!--    Setup App Tabs and load page1.html as first page      -->
<template id="mainPage">
	<ons-page>

		<ons-tabbar id="tabbar" swipeable>
			<ons-tab page="page1.html" active><ons-icon icon="fa-globe"></ons-icon></ons-tab>
			<ons-tab page="page2.html"><ons-icon icon="fa-globe"></ons-icon></ons-tab>
			<ons-tab page="page3.html"><ons-icon icon="fa-globe"></ons-icon></ons-tab>
		</ons-tabbar>
	</ons-page>
</template>
