刚子（rengang.org）找到一个不错的jQuery页面进度条代码：jQuery页面进度条之 “ Sonic – looping loaders ”，“ Sonic ” 是一个小小的JS“class”，经过压缩过后仅仅只有3K，利用它我们可以为页面创建自定义加载动画，即我们常说的“ Loading ”。“ Sonic ”的工作原理是循环动画、有点像诺记粉曾经玩过的贪吃蛇，不同的是它看起来是蛇一直在吞自己的尾巴。

“ Sonic ” 用的是 HTML5 的 canvas 元素和api，它的工作原理是：在一个预先定义的路径以微小的间隔陆续绘制预设的形状（默认情况下是6px的正方形）。您可以定义为：弧线、贝塞尔曲线、以及直线。

实例1：正方形（四条线） “Loading”：

var square = new Sonic({

width: 100,
height: 100,

fillColor: ‘#000’,

path: [
[‘line’, 10, 10, 90, 10],
[‘line’, 90, 10, 90, 90],
[‘line’, 90, 90, 10, 90],
[‘line’, 10, 90, 10, 10]
]

});

square.play();

document.body.appendChild(square.canvas);

Demo：实例1

当然，利用“ Sonic ” 也可以制作目前流行的圆形“ Loading ”，这可能看起来更舒服：

var circle = new Sonic({

width: 50,
height: 50,
padding: 50,

strokeColor: ‘#000’,

pointDistance: .01,
stepsPerFrame: 3,
trailLength: .7,

step: ‘fader’,

setup: function() {
this._.lineWidth = 5;
},

path: [
[‘arc’, 25, 25, 25, 0, 360]
]

});

circle.play();

document.body.appendChild(circle.canvas);

Demo：实例2

合理利用该JS类会制作出更多可能的效果，发挥你的想象。

如果考虑兼容低版本的浏览器，那你需要下载：cadc 在github上提供的 SonicGIF 来生成GIF“ Loading ”图片。

资源来自：“ Sonic – looping loaders ”

× 任刚 rengang.com.cn

赞助用于本站维护,手机长按识别二维码。

2元 5元 10元 50元 100元 意思一下

任刚（rengang.com.cn）整理分享，欣赏作品版权均归原作者所有，仅供学习交流。点击上方图标与好友分享！