app設計分為原生態(tài)的APP界面設計和HTML5開發(fā)設計的webAPP界面設計。2者之前的區(qū)別是很多，之前25學堂也分享過一些文章.

1、webAPP或手機網站開發(fā)設計實用小技巧分享

2、APP設計需求分析規(guī)范等。

但是2種方式，我們在采用加載loading圖標的制作和素材也是不一樣。那么如何來制作移動loading圖標呢？

當然，在原生態(tài)APP開發(fā)中，很多都是沿用系統(tǒng)自帶的loading圖標效果。但是有些追求完美的APP設計師或者開發(fā)工程師，想要設計獨一無二的app loading圖標效果。

這個時候就要app設計師來設計。

今天25學堂跟大家分享一套非常漂亮的手機app進度圖標loading圖標。

APPloading圖標素材下載

然而webAPP loading圖標制作需要使用圖片跟js相結合或者是純css3.有些時候可以借助于

現成的js庫來實現。今天跟大家分享的js庫是Rapha?L ?

酷站官網：http://raphaeljs.com/

Rapha?L是一個小的JavaScript庫，應該在網頁中使用矢量圖形的簡化你的工作。如果你想創(chuàng)建自己的特定的圖表或圖像裁剪和旋轉部件，例如，你可以簡單輕松地實現它與圖書館。

Rapha?L使用SVG W3C推薦標準和VML作為創(chuàng)建圖形庫。這意味著每一個圖形對象的創(chuàng)建也是一個DOM對象，所以你可以將JavaScript事件處理程序或修改后。Rapha?我的目標是提供一個適配器來生成矢量藝術跨瀏覽器兼容。

所以，我們在webapp中可以使用SVG做旋轉Loading圖標。

使用步驟：

1、將庫導入你的網站；

2、創(chuàng)建Rapha?l對象，將SVG div容器的id傳進去。

var paper = Raphael(divID, width, height);

3、剛生成的Rapha?l對象中創(chuàng)建你需要的元素，如下：

只需3步完成webapp loading圖標制作。非常簡單。