<script>
ons.ready(function() {
var pullHook = document.getElementById('pull-hook');

pullHook.addEventListener('changestate', function(event) {
var message = '';

switch (event.state) {
case 'initial':
message = 'Pull to refresh';
break;
case 'preaction':
message = 'Release';
break;
case 'action':
message = 'Loading...';
break;
}

pullHook.innerHTML = message;
});

pullHook.onAction = function(done) {
RefreshData()

setTimeout(done, 2000);
};
});

function RefreshData(){
document.getElementById('contentbox').innerHTML = "Data has been refreshed";

}
</script>

<ons-page>

	  <ons-toolbar>
        <div class="left"><ons-toolbar-button><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button></div>
        <div class="center">Page Name</div>
        <div class="right"><ons-toolbar-button><ons-icon icon="fa-camera"></ons-icon></ons-toolbar-button></div>
      </ons-toolbar>



   <div class="content" id="maincontents">

        <ons-pull-hook id="pull-hook">Pull to refresh</ons-pull-hook>
        <div class="content" id="contentbox">PULL DOWN TO REFRESH DATA!</div>

</div>

      <ons-bottom-toolbar>
        <center>
             <ons-row style="padding: 6px">

                  <ons-col><ons-toolbar-button><ons-icon icon="fa-home" size="32px"></ons-icon></ons-toolbar-button></ons-col>
                  <ons-col><ons-toolbar-button><ons-icon icon="fa-globe" size="32px"></ons-icon></ons-toolbar-button></ons-col>
                  <ons-col><ons-toolbar-button><ons-icon icon="fa-info" size="32px"></ons-icon></ons-toolbar-button></ons-col>
             </ons-row>
        </center>
      </ons-bottom-toolbar>

</ons-page>
