How to create loading in onsen-ui?

i use phonegap and onsen-ui in my application.

how to create loading with onsen in my app?

Thank you

sorry for my poor english.

Solution

Use ngShow or ngHide.

The following is the sample code.

<script>
    var myApp = angular.module('myApp', [ 'ngTouch', 'onsen.directives']);    

    myApp.controller('SampleCtrl', function($scope, $timeout){
        $scope.isShow = true;

        $timeout(function(){
            //If page content was loaded, set the false to $scope.isShow.
            $scope.isShow = false;
        },'2000')
    });
</script>


</head>
  <body ng-controller="SampleCtrl">

  <div ng-show="isShow">
    <!--Define your loading screen animation with HTML and CSS.-->
  </div>

</body>
</html>

You need to define css animation by yourself. However, there are many useful tools to create loading animation like this.