jQuery实用Ajax loading spin旋转指示器插件-灵象搜搜资源网

jQuery实用Ajax loading spin旋转指示器插件

发布2020-11-07 浏览764次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

spin.js是一款非常实用的jQuery Ajax loading spin旋转指示器插件。在页面进行ajax调用的时候，需要一个指示器来告诉用户当前正处于加载状态。该旋转指示器的作用就类似于一个无线循环的进度条。通过该旋转指示器插件，你可以自定义它的密度、大小、旋转速度和旋转方向等属性，非常方便实用。该jQuery旋转指示器的特点有：

没有使用图片，纯css制作。
没有使用外部依赖。
可配置性强。
高分辨率。
在旧的IE浏览器中使用VML回退。
实用CSS3 @keyframe动画，通过setTimeout()来回退
可以在所有的现代浏览器中工作，包括IE6。
压缩后的版本只有1.6K大小。
自由开放，使用MIT License协议。

Spin.js动态创建jQuery Ajax loading spin旋转指示器，可以完全替代使用GIF图片来作为Ajax指示器的方案。

使用方法

基本配置

new Spinner({color:'#fff', lines: 12}).spin(target);

带参数配置

var opts = {
  lines: 7, // The number of lines to draw
  length: 8, // The length of each line
  width: 10, // The line thickness
  radius: 30, // 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: 0.8, // Rounds per second
  trail: 23, // Afterglow percentage
  shadow: false, // 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结构并开始旋转动画，如果使用一个目标元素作为参数传递，该旋转指示器将被添加到第一个子节点上，并且水平和垂直居中。

手动插入旋转指示器

如果需要手动将旋转指示器插入到HTML DOM元素中，可以使用不带参数的spin()方法，并使用el属性来接收HTML元素：

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

旋转指示器位置

从2.0.0版本开始，该旋转指示器使用绝对定位，定位在距离父元素50%的地方。你可以手动指定left和top属性来改变它的位置。

Note: The spinner element is a 0×0 pixel DIV that represents the center of the spinner. Hence, if you passed {top:0, left:0} only the lower right quater of the spinner would be inside the target's bounding box.