-2

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.

Sadegh Bakhshandeh Sajjad
  • 139
  • 1
  • 4
  • 14

3 Answers3

12

Or you could use modal to show loading screen like this.

<ons-modal var="modal">
      <ons-icon icon="ion-load-c" spin="true"></ons-icon>
      <br><br>
      Please wait.<br>Loading...
    </ons-modal>

then call the modal.show(); in your controller to show the modal and modal.hide(); to hide it.

Danish Jamil
  • 1,090
  • 11
  • 31
5

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.

ataru
  • 401
  • 3
  • 6
0

You can also use the placeholder..

https://onsen.io/reference/ons-loading-placeholder.html

Sagar Parikh
  • 306
  • 3
  • 7