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图标。

webAPP 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对象中创建你需要的元素,如下:

1

2

3

4

// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)

circle.attr("fill", "#f00");

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