5个基于HTML5的加载动画推荐

标签: html5 加载 动画 | 发表时间:2011-09-09 08:30 | 作者:(author unknown) Tim
出处:http://www.iteye.com
在Web开发中,加载动画是非常有用的,不要低估它,它可以让网站响应用户的交互,让用户知道服务器正在处理请求,并告知用户需要等待一段时间。

通常加载动画是GIF格式的,但是现在我们有强大的浏览器和技术(VML和Canvas),加载动画不再只限于GIF格式,它可以由JavaScript来生成,并高度可定制,以下是我整理的5个JavaScript实现的加载动画方案。

这些动画并不是所有的都能在老的浏览器上实现,比如IE6、IE7和IE8。但是其中activity indicator 和 spin.js同时支持VML(IE可支持)和Canvas(最新的浏览器可支持)。

1.  Activity Indicator



一个jQuery插件,呈现半透明的动态旋转指针,基于SVG或VML。除了Activity Indicator依赖jQuery外,其他几乎和spin.js相同。

特点如下:

  • 轻量级脚本
  • 分辨率无关
  • Alpha透明度
  • 高度可配置的外观
  • 可在所有主流浏览器中运行
  • 使用功能检测
  • 优雅降级(Degrades gracefully)
2.  Canvas Loader



这个插件可以代替传统的GIF格式的加载动画图片,基于canvas,可以创建相同宽高的加载样式。这个插件在开发移动应用时非常实用,可能会在Android中看到。使用之前,它还可以检测浏览器是否支持canvas。

特点如下:

  • 样式有限,且只能在支持Canvas的浏览器中使用。
3.  Sonic Looping Loader



Sonic是一个小的(大约3K)JS类,你可以使用它来创建自定义加载动画。它在循环动画(形状如同一条蛇试图咬自己的尾巴)方面表现较好,这是一个非常酷的JavaScript加载动画,但是需要你的浏览器支持canvas。

特点如下:

  • 高度可配置,但只能在支持canvas的浏览器中使用。
  • 文件大小大约3K。
  • 可定制的加载样式。
4.  HeartCode Canvas Loader



Heartcode CanvasLoader是一个轻量级的JavaScript UI库,它使用了HTML5 Canvas元素去绘制和显示圆形的加载动画。The Heartcode CanvasLoader运行在每一个支持HTML5 Canvas的浏览器中。

特点如下:

  • 只能在支持Canvas的浏览器中使用。
  • 拥有一个可定制加载样式的用户界面。
5.  Spin.js



Spin.js支持老浏览器,它还有一个定制加载样式的用户界面。

特点如下:

  • 没有依赖关系(支持jQuery,但不必需)
  • 高度可配置
  • 分辨率无关
  • 在老的IE浏览器中使用VML作为后备
  • 可以在所有的主流浏览器中使用,包括IE6
  • MIT许可

VIA Queness.com



感谢 wangguo 投递这篇资讯

已有 0 人发表留言,猛击->>这里<<-参与讨论


ITeye推荐



相关 [html5 加载 动画] 推荐:

5个基于HTML5的加载动画推荐

- Tim - ITeye资讯频道
在Web开发中,加载动画是非常有用的,不要低估它,它可以让网站响应用户的交互,让用户知道服务器正在处理请求,并告知用户需要等待一段时间. 通常加载动画是GIF格式的,但是现在我们有强大的浏览器和技术(VML和Canvas),加载动画不再只限于GIF格式,它可以由JavaScript来生成,并高度可定制,以下是我整理的5个JavaScript实现的加载动画方案.

HTML5中的prefetch预加载功能

- iVane - duanxin.me
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,提高效率. 目前只支持Firefox 3.5+,chrome 13+,在不支持的浏览器,用了这个特性也不会出错的,只不过浏览器解析不到而已.

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

- - HTML5资源教程
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉. 有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等. 我曾经介绍过本站上使用的一些速度优化技术.

Adobe 发布 HTML5 网页动画工具 Adobe Edge

- Joji - ITeye资讯频道
    Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge,允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash.     Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具{Adobe Edge}

- Zen - 36氪
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具Adobe Edge

- XcessLeo - GeekPark 捕风捉影
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

adobe神器Animate教程:创建HTML5动画(二)

- - 优设(UISDC)
久等了,上集我们制作了一个具有行走动作的蓝精灵动画,本集我们来为蓝精灵实现往返走动的效果. Symbol,即元件,是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素,便于管理和重用. 脚本,是动画制作中另一个重要的概念. 在HTML5动画制作中,脚本即JavaScript脚本,通过脚本我们可以响应动画事件,实现交互,更自由的操控动画元素,比如元件动画的重复播放.

八大疯狂的HTML5 Canvas及WebGL动画效果

- - HTML5研究小组
HTML5、WebGL和JavaScript改变了长久以来的动画制作行业. 在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet. 而现在,使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能. 我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果. 现在浏览器和web技术的不断发展.

神器Animate教程:使用SpriteSheet创建HTML5动画

- - 优设(UISDC)
在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发,介绍在Edge Animate中如何使用SpriteSheet. 在文章 《EDGE ANIMATE:ADOBE新推制作HTML5动画可视化工具》中,可以看到一个简单的蓝精灵动画,一个蓝精灵从屏幕左侧走到右侧,又返回,然后不断重复.

让你大开眼界的9款HTML5动画特效

- - HTML5资源教程
前几篇文章中我们已经分享了许多令人惊叹的 HTML5 3D特效和HTML5 Canvas特效,确实非常不错,今天我们精选了9款让你大开眼界的 HTML5动画特效,一起来看看. 1、HTML5梦幻特效 可给任意元素添加魔幻效果. 我们之前介绍HTML5动画特效比较多的是 HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效.