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

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

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

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

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

這個時候就要app設(shè)計師來設(shè)計。

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

APPloading圖標素材下載

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

現(xiàn)成的js庫來實現(xiàn)。今天跟大家分享的js庫是Rapha?L ?

酷站官網(wǎng)：http://raphaeljs.com/

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

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

所以，我們在webapp中可以使用SVG做旋轉(zhuǎn)Loading圖標。

使用步驟：

1、將庫導(dǎo)入你的網(wǎng)站；

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

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

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

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