Spin.js 动态制作网页 Loading 动画的插件 - 文章教程

Spin.js 动态制作网页 Loading 动画的插件

发布于 2018-08-28 字数 3339 浏览 2861 评论 0

Spin.js 是一款动态制作网页 Loading 动画的脚本插件,他轻量级没有使用任何的图片,依赖于 jQuery 插件,但是没有版本差异,兼容几乎所有的浏览器,包括 IE6 等旧版本的浏览器,凡是支持JavaScript 脚本的浏览器都可以很流畅的显示 Loading 动画。

Spin.js 动态制作网页 Loading 动画的插件

简单使用

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

spin() 方法创建必要的 HTML 元素和启动动画。如果一个目标元素作为参数传递,spinner 控制项是添加的第一个子元素,水平和垂直居中。

功能特色

  • 没有使用任何图片,没有外部的CSS
  • 无相关性(jQuery 支持,但不要求)
  • 高度可配置的
  • 独立的决议
  • 用 VML 作为老 IES 回退
  • 使用关键帧动画,落回 settimeout()
  • 在所有主要浏览器的作品,包括 IE6
  • MIT 许可证

spin.js 动态创建旋转活动的指标,可以作为分辨率独立更换为 Ajax 加载 GIF。

自定义调用

在以手动插入旋转到 DOM 可以调用 spin() 方法无需任何 参数和使用 EL 属性访问的 HTML 元素:

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

定位

由于版本 2.0.0s 的 spinner 是完全位于其偏母 50%。 你可能上衣选择位置旋转手动。

旋转元件是一个 0×0 像素的 DIV,代表了旋转中心 。因此如果 {top:0, left:0} 只有右下四分之一的旋转会在目标的边界框。

隐藏的旋转

隐藏的 spinner,调用 stop() 方法,这消除了在 DOM 和停止动画 UI 元素。停止 spinner,可重复使用的调用 spin() 方法。

jQuery 插件

spin.js 需要 jQuery。无论如何,如果你想使用jQuery,你可以使用这个插件。

支持的浏览器

spin.js 已在下列的浏览器上测试成功:

  • Chrome
  • Safari 3.2+
  • Firefox 3.5+
  • IE 6,7,8,9
  • Opera 10.6+
  • Mobile Safari (iOS 3.1+)
  • Android 2.3+

下载地址

项目地址:http://fgnass.github.io/spin.js/
开发板:http://fgnass.github.io/spin.js/spin.js
压缩版:http://fgnass.github.io/spin.js/spin.min.js

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0