講解使用SVG製作loading載入動畫的方法

今天和大家分享一個以SVG影象為主的loading載入動畫，現在移動端網頁使用比較多，若還用GIF做loading圖片的話，可能會影響影象的質量，所以使用SVG是一個不錯的方式。

這次展示的`程式碼由 Aurer 編寫，前端人員只需要直接複製想要的SVG程式碼就能直接使用，而且可以改變顏色。當然，對於好學的同學，也可以研究下這個程式碼的編寫原理。

下面我們來看一下具體的兩個載入相關的用法：

ionic 載入動作 $ionicLoading

$ionicLoading 是 ionic 預設的一個載入互動效果。裡面的內容也是可以在模板裡面修改。

使用例項：

HTML 程式碼：

XML/HTML Code複製內容到剪貼簿TheStooges{{}}

JavaScript 程式碼

JavaScript Code複製內容到剪貼簿 le(‘ionicApp‘,[‘ionic‘]) roller(‘AppCtrl‘,function($scope,$timeout,$ionicLoading){ //Setuptheloader $({ content:‘Loading‘, animation:‘fade-in‘, showBackdrop:true, maxWidth:200, showDelay:0 }); //Setatimeouttoclearloader,howeveryouwouldactuallycallthe$();methodwhenevereverythingisreadyorloaded. $timeout(function(){ $(); $ges=[{name:‘Moe‘},{name:‘Larry‘},{name:‘Curly‘}]; },2000); });

$ionicLoadingConfig

使用例項：

HTML 程式碼

XML/HTML Code複製內容到剪貼簿

CSS 程式碼

CSS Code複製內容到剪貼簿 body{ cursor:url(‘http://www.runob.com/try/demo_source/finger.png‘),auto; } p{ text-align:center; margin-bottom:40px!important; } nersvg{ width:19%!important; height:85px!important; }

JavaScript 程式碼

JavaScript Code複製內容到剪貼簿 le(‘ionicApp‘,[‘ionic‘]) roller(‘MyCtrl‘,function($scope){ });