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

6顶
0踩

Web前端

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

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

  • 基于java的-28-“智慧食堂”设计与实现--LW-源码.zip

    提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！

  • C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码

    C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码 1 回文串 “回文串”是一个正读和反读都一样的字符串，初始化标志flag=true，比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串，如果该字符串的每个子字符串都是回文的，那么该字符串的分区就是回文分区。 例如，“aba | b | bbabb | a | b | aba”是“abababababa”的回文分区。 确定给定字符串的回文分区所需的最少切割。 例如，“ababababababa”至少需要3次切割。 这三个分段是“a | babbab | b | ababa”。 如果字符串是回文，则至少需要0个分段。 如果一个长度为n的字符串包含所有不同的字符，则至少需要n-1个分段。

  • node-v9.2.1.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • 贪心算法解决活动选择问题，Java版源码

    贪心算法是一种在每一步选择中都采取在当前状态下最好或最优的选择，从而希望导致结果是全局最好或最优的算法策略。贪心算法在有最优子结构的问题中尤为有效。最优子结构的意思是局部最优解可以决定全局最优解。 附件中一个使用贪心算法解决活动选择问题（也称为会议时间安排问题）的 Java 示例代码。这个问题的目标是选择最大的活动数量，使得活动之间互不重叠。 在示例中，我们定义了一个 Activity 类来表示每个活动的开始和结束时间。然后，我们创建了一个活动数组，并使用 Arrays.sort() 方法按照活动的结束时间对它们进行排序。 接下来，我们遍历排序后的数组，使用贪心算法的策略选择活动。选择的标准是当前活动的开始时间是否晚于或等于之前选择的最后一个活动的结束时间。如果是，我们就选择这个活动，并更新 lastActivityEnd 为当前活动的结束时间。最后，我们打印出可以执行的最大活动数量。

Global site tag (gtag.js) - Google Analytics