codecamp

分享几个制作loading效果的生成工具

09 July 2015
号外号外:专注于移动端的fullPage.js来啦!!!快点我查看

今天给大家分享几个自己收藏的制作loading gif图的网站,虽然现在css3也能做出同样的效果,但在考虑到兼容性的时候,gif可以说是最快速的方法。

ajaxload.info

这是我最常用的一个,支持多种形状,前景色,背景色,透明背景,非常方便。

loadingapng.com

很精美的页面,只是我发现不能下载不知道为什么,支持两种图片类型,多种形状,前景色,背景色,透明背景,自定义大小。

loadinggif.com

简单实用派,支持多种形状,前景色,背景色,透明背景。

preloaders.net

支持多种形状,两种格式,前景色,背景色,透明别净,动画速度,自定义尺寸等

总结

介绍这么多不进行对比就是耍流氓,几个工具的对比如下:

名称 支持格式 多种形状 前景色 背景色 透明背景 大小 动画速度
[ajaxload.info][1] gif 39
[loadingapng.com][2] apng, gif 45
[loadinggif.com][3] gif 37
[preloaders.net][4] apng, gif 无数

最后分享一下spin.jscssload,一个是用js,一个使用css都可以生成动画。

如果你也有好的资料,那么在评论区和我一起讨论吧。

参考资料

我的Chrome插件
列举webpack的几大特色
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }