资讯频道 → Web前端
阅读更多

6顶
0踩

Web前端

翻译新闻 5个基于HTML5的加载动画推荐

2011-09-09 16:30 by 副主编 wangguo 评论(1) 有17318人浏览
javascript 加载动画 jquery html5 canvas
在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

  • 大小: 5.6 KB
  • 大小: 6.5 KB
  • 大小: 18.3 KB
  • 大小: 10.8 KB
  • 大小: 18 KB
  • 大小: 16.2 KB
6
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 ahead_zhan 2011-09-13 09:49
有点意思

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • HTML5 SVG咖啡杯加载动画特效

    HTML5 SVG咖啡杯加载动画特效是一款gsap基于svg制作休闲咖啡图标动画特效。

  • 基于HTML5 Canvas和Rebound动画的Loading加载动画特效

    这是一款基于HTML5 Canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面，并显示多边形的loading加载器来表示加载进度。

  • 基于HTML5 Canvas实现的Loading形状加载动画特效源码.zip

    基于HTML5 Canvas实现的Loading形状加载动画特效源码.zip

  • 基于html5 canvas绘制星云转动无限加载动画特效源码.zip

    基于html5 canvas绘制星云转动无限加载动画特效源码.zip

  • 酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    用法非常简单，基于原生 JS CSS 开箱即用 在head中引入css，在body第一行引入js 即可失效酷炫的页面加载特效 详细介绍参考 https://zzzmh.cn/single?id=53

  • 收集一些HTML5网页加载动画（Loading）.rar

    收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分...

  • html5 canvas实现的酷炫页面预加载动画图标效果特效代码

    这是一款基于html5 canvas实现的酷炫页面预加载动画图标效果源码。有多种预加载动画效果可供选择，动画渐变效果平滑自然，是一款经典的html5加载动画。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本...

  • HTML5加载动画

    3、 ...今天给大家带来的这款Loading加载动画是基于HTML5Canvas的，在canvas画布上，我们动态绘制许多多边形，这些多边形伴随着颜色的随机变化和旋转，形成了奇幻色彩的视觉效果，是一款非常炫酷...

  • HTML5 Canvas 液体流动样式Loading加载动画

    之前我们分享过很多基于jQuery和...今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画，这款Loading动画在加载时会呈现液体流动的动画效果，并且由于和背景颜色的对比，也略微呈现发光的动画效果。

  • HTML5猫头像加载中动画特效特效代码

    HTML5猫头像加载中动画特效是一款基于HTML5 Canvas+JS绘制的猫表情加载中动画效果。

  • HTML5彩虹光波纹动画特效

    HTML5彩虹光波纹动画特效是一款基于canvas webgl属性制作的彩虹光波纹自定义数值展示特效。

  • HTML5猫头像加载中动画特效

    HTML5猫头像加载中动画特效是一款基于HTML5 Canvas+JS绘制的猫表情加载中动画效果。

  • html5 svg技术生成圆形加载动画的实例.rar

    基于HTML5 svg技术创作的圆形加载动画，是一个带数字的进度条，HTML5 SVG技术实例，请在Chrome、火狐或IE10中测试源代码。本SVG实例是生成一个圆形的进度条，并且带有数字百分比显示，演示页面会看到圆形加载条一点...

  • HTML5 SVG Loading 动画加载特效

    这是一款基于HTML5/CSS3和SVG的Loading加载动画特效，一共有4种不同的动画效果。每一组Loading动画都非常可爱，他们都非常欢快的转圈，同时又有颜色渐变的动画效果。另外，回顾之前分享的一款CSS3 Loading动画HTML5 ...

  • HTML5 SVG圆点跳动加载特效

    HTML5 SVG圆点跳动加载特效是一款基于HTML5 SVG绘制的水平线条排列的5个圆点依次顺序来回跳动网页加载动画特效。

  • 1基于蓝牙的项目开发--蓝牙温度监测器.docx

    1基于蓝牙的项目开发--蓝牙温度监测器.docx

  • AppDynamics：性能瓶颈识别与优化.docx

    AppDynamics：性能瓶颈识别与优化

  • percona-xtrabackup-2.4.28-1.ky10.x86-64.rpm

    xtrabackup银河麒麟v10rpm安装包

  • 2024年全球产品经理大会（脱敏）PPT合集（34份）.zip

    2024年全球产品经理大会（脱敏）PPT合集，共34份。 1、AI 原生产品设计的 7 个反共识 2、AI 时代的策略产品与内容社区推荐实践 3、AI时代的用户界面设计 4、AI智能陪练：大模型赋能销售成长 5、AI浪潮中的应用主义者 6、AI驱动下的B端产品的思考与创新 7、AI驱动业务增长的探索与实践 8、Al Native 生产力工具的发展、价值与商业落地 9、B端产品设计避坑指南 10、GenAl驱动的xGen电商AI平台产品实践与思考 11、Kwaipilot 在快手的落地实践 12、OPPO AI的探索新交互到新生态 13、RPA + AI打造大模型驱动的领先数字员工 14、产品AI化重塑的思考与实践 15、产品分析：通过关键指标助力团队与企业成功 16、从RPA到Al Agent，高价值、可落地的智能助手 17、从流量运营到AI驱动的机器增长 18、做穿越时代的产品 19、创造好工具，创造世界一流产品力 20、医疗健康场景的大模型产品探索 21、即时零售柔性供应链体系建设与AIGC在零售数字化的探索 22、向量数据库的出海实践与未来展望 23、大模型在B端落地思考实践

Global site tag (gtag.js) - Google Analytics