APPloading图标素材和webAPP loading图标制作

app设计分为原生态的APP界面设计和HTML5开发设计的webAPP界面设计。2者之前的区别是很多，之前25学堂也分享过一些文章.

1、webAPP或手机网站开发设计实用小技巧分享

2、APP设计需求分析规范等。

但是2种方式，我们在采用加载loading图标的制作和素材也是不一样。那么如何来制作移动loading图标呢？

当然，在原生态APP开发中，很多都是沿用系统自带的loading图标效果。但是有些追求完美的APP设计师或者开发工程师，想要设计独一无二的app loading图标效果。

这个时候就要app设计师来设计。

今天25学堂跟大家分享一套非常漂亮的手机app进度图标loading图标。

APPloading图标素材下载

然而webAPP loading图标制作需要使用图片跟js相结合或者是纯css3.有些时候可以借助于

现成的js库来实现。今天跟大家分享的js库是RaphaëL  

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

RaphaëL是一个小的JavaScript库，应该在网页中使用矢量图形的简化你的工作。如果你想创建自己的特定的图表或图像裁剪和旋转部件，例如，你可以简单轻松地实现它与图书馆。

RaphaëL使用SVG W3C推荐标准和VML作为创建图形库。这意味着每一个图形对象的创建也是一个DOM对象，所以你可以将JavaScript事件处理程序或修改后。Raphaë我的目标是提供一个适配器来生成矢量艺术跨浏览器兼容。

所以，我们在webapp中可以使用SVG做旋转Loading图标。

使用步骤：

1、将库导入你的网站；

2、创建Raphaël对象，将SVG div容器的id传进去。

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

3、刚生成的Raphaël对象中创建你需要的元素，如下：

只需3步完成webapp loading图标制作。非常简单。