博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
5个基于HTML5的加载动画推荐
阅读量:4321 次
发布时间:2019-06-06

本文共 1101 字,大约阅读时间需要 3 分钟。

在Web开发中,加载动画是非常有用的,不要低估它,它可以让网站响应用户的交互,让用户知道服务器正在处理请求,并告知用户需要等待一段时间。

通常加载动画是GIF格式的,但是现在我们有强大的浏览器和技术(VML和Canvas),加载动画不再只限于GIF格式,它可以由JavaScript来生成,并高度可定制,以下是我整理的5个JavaScript实现的加载动画方案。
这些动画并不是所有的都能在老的浏览器上实现,比如IE6、IE7和IE8。但是其中activity indicator 和 spin.js同时支持VML(IE可支持)和Canvas(最新的浏览器可支持)。
一个jQuery插件,呈现半透明的动态旋转指针,基于SVG或VML。除了Activity Indicator依赖jQuery外,其他几乎和spin.js相同。
特点如下:

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

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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/jshen/archive/2012/11/22/2782067.html

你可能感兴趣的文章
经典排序——希尔排序
查看>>
团队编程项目作业2-团队编程项目代码设计规范
查看>>
英特尔公司将停止910GL、915GL和915PL芯片组的生产
查看>>
Maven配置
查看>>
HttpServletRequest /HttpServletResponse
查看>>
SAM4E单片机之旅——24、使用DSP库求向量数量积
查看>>
从远程库克隆库
查看>>
codeforces Unusual Product
查看>>
hdu4348 - To the moon 可持久化线段树 区间修改 离线处理
查看>>
正则表达式的搜索和替换
查看>>
个人项目:WC
查看>>
地鼠的困境SSL1333 最大匹配
查看>>
flume+elasticsearch+kibana遇到的坑
查看>>
【MM系列】在SAP里查看数据的方法
查看>>
C#——winform
查看>>
CSS3 transform制作的漂亮的滚动式导航
查看>>
《小强升职记——时间管理故事书》读书笔记
查看>>
Alpha 冲刺(3/10)
查看>>
Kaldi中的Chain模型
查看>>
spring中的ResourceBundleMessageSource使用和测试示例
查看>>