<script>
ons.ready(function() {
var infiniteList = document.getElementById('infinite-list');

infiniteList.delegate = {
createItemContent: function(i) {
return ons.createElement('<ons-list-item>Item ' + i + '</ons-list-item>');
},
countItems: function() {
return 10000;
}
};

infiniteList.refresh();
});

window.fn = {};
window.fn.load = function(page) {
var content = document.getElementById('content');
content.load(page);
};

</script>

<style>

html, body {
height: 100%;
margin: 0
}

@keyframes breath {
0%   { background-size: 50% auto; }
50% { background-size: 70% auto; }
100% { background-size: 50% auto; }
}

#bkg{
width: 100%;
height: 50%;
position: absolute;top: 30%;
animation: breath 4s linear infinite;
background: url("https://media.giphy.com/media/zBg3B1KnmX69i/giphy.gif") center center no-repeat;
}
</style>


<ons-page>

<div class="content" id="content">
<center><div style="position: absolute;top: 15%;width:100%"><h1><b>My Application</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>
</ons-page>


<script>
setTimeout(myFunction, 4000);

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

</script>

<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>



<template id="page1.html">
  <ons-page>

<ons-list>
<ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
</ons-list>
   </ons-page>
</template>

<template id="page2.html">
  <ons-page>
   
   </ons-page>
</template>

<template id="page3.html">
  <ons-page>
  
   </ons-page>
</template>