实例讲解使用SVG制作loading加载动画的方法

        <ion-header-bar>  
          <h1 class="title">The Stooges</h1>  
        </ion-header-bar>  
        <ion-content has-header="true">  
          <ion-list>  
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>  
          </ion-list>  
        </ion-content>  
      </ion-view>  
       
  </body>  
</html>  

JavaScript 代码

JavaScript Code复制内容到剪贴板

angular.module(‘ionicApp‘, [‘ionic‘])   
.controller(‘AppCtrl‘, function($scope, $timeout, $ionicLoading) {   
  
  // Setup the loader   
  $ionicLoading.show({   
    content: ‘Loading‘,   
    animation: ‘fade-in‘,   
    showBackdrop: true,   
    maxWidth: 200,   
    showDelay: 0   
  });   
     
  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.   
  $timeout(function () {   
    $ionicLoading.hide();   
    $scope.stooges = [{name: ‘Moe‘}, {name: ‘Larry‘}, {name: ‘Curly‘}];   
  }, 2000);   
     
});  

$ionicLoadingConfig
使用实例：

HTML 代码

XML/HTML Code复制内容到剪贴板

<ion-content scroll="false" class="has-header">  
  <p>  
    <ion-spinner icon="android"></ion-spinner>  
    <ion-spinner icon="ios"></ion-spinner>