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

2020-04-24 19:51:00易采站长站整理

    <ion-spinner icon="ios-small"></ion-spinner>  
    <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>  
    <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>  
  </p>  
  
  <p>  
    <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>  
  
    <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>  
    <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>  
    <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>  
    <ion-spinner icon="spiral"></ion-spinner>  
  </p>  
  
  
</ion-content>  

 
CSS 代码

CSS Code复制内容到剪贴板

body {   
  cursor: url(‘http://www.runob.com/try/demo_source/finger.png‘), auto;   
}       
p {   
  text-align: center;   
  margin-bottom: 40px !important;   
}   
.spinner svg {   
  width: 19% !important;   
  height: 85px !important;   
}  

JavaScript 代码

JavaScript Code复制内容到剪贴板

angular.module(‘ionicApp‘, [‘ionic‘])   
  
.controller(‘MyCtrl‘, function($scope) {    
     
});