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

6顶
0踩

Web前端

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

2011-09-09 16:30 by 副主编 wangguo 评论(1) 有17364人浏览
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个圆点依次顺序来回跳动网页加载动画特效。

  • 毕业设计选题 -未来生鲜运输车设计.pptx

    毕业设计选题 -未来生鲜运输车设计.pptx

  • 基于樽海鞘算法优化的极限学习机回归预测及其与BP、GRNN、ELM的性能对比研究

    内容概要：本文详细探讨了基于樽海鞘算法（SSA）优化的极限学习机（ELM）在回归预测任务中的应用，并与传统的BP神经网络、广义回归神经网络（GRNN）以及未优化的ELM进行了性能对比。首先介绍了ELM的基本原理，即通过随机生成输入层与隐藏层之间的连接权重及阈值，仅需计算输出权重即可快速完成训练。接着阐述了SSA的工作机制，利用樽海鞘群体觅食行为优化ELM的输入权重和隐藏层阈值，从而提高模型性能。随后分别给出了BP、GRNN、ELM和SSA-ELM的具体实现代码，并通过波士顿房价数据集和其他工业数据集验证了各模型的表现。结果显示，SSA-ELM在预测精度方面显著优于其他三种方法，尽管其训练时间较长，但在实际应用中仍具有明显优势。 适合人群：对机器学习尤其是回归预测感兴趣的科研人员和技术开发者，特别是那些希望深入了解ELM及其优化方法的人。 使用场景及目标：适用于需要高效、高精度回归预测的应用场景，如金融建模、工业数据分析等。主要目标是提供一种更为有效的回归预测解决方案，尤其是在处理大规模数据集时能够保持较高的预测精度。 其他说明：文中提供了详细的代码示例和性能对比图表，帮助读者更好地理解和复现实验结果。同时提醒使用者注意SSA参数的选择对模型性能的影响，建议进行参数敏感性分析以获得最佳效果。

  • 2025年中国生成式AI大会PPT（4-1）

    2025年中国生成式AI大会PPT（4-1）

  • 无刷直流电机双闭环调速系统的Simulink建模与参数优化

    内容概要：本文详细介绍了基于Simulink平台构建无刷直流电机（BLDC）双闭环调速系统的全过程。首先阐述了双闭环控制系统的基本架构，即外层速度环和内层电流环的工作原理及其相互关系。接着深入探讨了PWM生成模块的设计，特别是占空比计算方法的选择以及三角波频率的设定。文中还提供了详细的电机参数设置指导，如转动惯量、电感、电阻等，并强调了参数选择对系统性能的影响。此外，针对PI控制器的参数整定给出了具体的公式和经验值，同时分享了一些实用的调试技巧，如避免转速超调、处理启动抖动等问题的方法。最后，通过仿真实验展示了系统的稳定性和鲁棒性，验证了所提出方法的有效性。 适用人群：从事电机控制研究的技术人员、自动化工程领域的研究生及科研工作者。 使用场景及目标：适用于需要深入了解和掌握无刷直流电机双闭环调速系统设计与优化的人群。主要目标是帮助读者学会利用Simulink进行BLDC电机控制系统的建模、仿真和参数优化，从而提高系统的稳定性和响应速度。 其他说明：文章不仅提供了理论知识，还包括了许多实践经验和技术细节，有助于读者更好地理解和应用相关技术。

Global site tag (gtag.js) - Google Analytics