超便捷好用的-圆形花瓣加载滚动图片插件spin.js

使用ajax异步请求时显示过渡的加载滚动图片是在常用不过的事情，接下来和大家分享这个插件。

样子示例：（只有这一个样子，可以动态设置显示大小、花半数、颜色等各项参数）

注：如果需要更绚丽样式的童鞋，请继续百度吧^-^

兼容性（还是很好的）

使用方法：

1、只需要引入spin.js即可（可在本人的资源中免费下载哦）。

2、添加配置参数：

<span style="font-size:18px;">var opts = {            
            lines: 10, // 花瓣数目
            length: 5, // 花瓣长度
            width: 2, // 花瓣宽度
            radius: 6, // 花瓣距中心半径
            corners: 1, // 花瓣圆滑度 (0-1)
            rotate: 0, // 花瓣旋转角度
            direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
            color: '#444', // 花瓣颜色
            speed: 1, // 花瓣旋转速度
            trail: 60, // 花瓣旋转时的拖影(百分比)
            shadow: false, // 花瓣是否显示阴影
            hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
            className: 'spinner', // spinner css 样式名称
            zIndex: 2e9, // spinner的z轴 (默认是2000000000)
            top: '4%', // spinner 相对父容器Top定位 单位 px，也可以是auto
            left: '56%'// spinner 相对父容器Left定位 单位 px<span style="font-family: Arial, Helvetica, sans-serif;">，也可以是auto</span>

        };</span>

3、将opts进行初始化

<span style="font-size:18px;">var spinner = new Spinner(opts);</span>

4、在ajax进行实战

首先说明显示和隐藏的方法：

<pre name="code" class="javascript"><span style="font-size:18px;">var target=document.getElementById("showRefLoading");//放到的位置
//显示加载图
spinner.spin(target);
//关闭spinner  
spinner.spin();</span>

完整ajax例子

<span style="font-size:18px;">$.ajax({
	type: "POST",
	url: url,
	data: params,
	dataType: "json",
	beforeSend: function () {
		//target为显示spiner的父容器
		<span style="background-color: rgb(255, 255, 102);">var target=document.getElementById("showRefLoading");</span>
		<span style="background-color: rgb(255, 255, 51);">spinner.spin(target); </span>                   
        },
	success: function(result){</span>

<span style="font-size:18px;"><span style="white-space:pre">		</span>//成功的处理逻辑
		//关闭spinner  
        <span style="white-space:pre">	</span>spinner.spin();
	},
	eroor: function(){
		console.log("load error!");
		//关闭spinner  
        <span style="white-space:pre">	</span>spinner.spin();
	}
});</span>

最后分享（亲测很卡）

Spin.js 的在线设计、演示及下载地址为：http://fgnass.github.io/spin.js/

Spin.js 的扩展性也是很强的，可以下载其源码进行修改和扩展，这里是Spin.js 的讨论区 https://github.com/fgnass/spin.js/issues

超便捷好用的-圆形花瓣加载滚动图片插件spin.js

猜你喜欢