超便捷好用的-圆形花瓣加载滚动图片插件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，也可以是autoleft: '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相关推荐

html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
html5 黑色圆圈,html5 css3圆形百分比加载动画特效
特效描述:html5 css3 圆形百分比加载动画特效.html5 css3 loading加载动画,圆形百分比进度条加载动画,加载完成显示健康度检测得分情况. 代码结构 1. 引入JS 2. HT ...
关于 android 加载 res 图片 out of memory 问题解决同样适用于 sd卡图片
2019独角兽企业重金招聘Python工程师标准>>> 发现android 加载res图片如果过多也会崩溃 android 也是使用 Bitmap bm = BitmapFacto ...
UIWebView如何加载本地图片
UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...
解决Android 加载大图片OOM
图片在Android 占用内存计算假如一张图的像素为100×200,那么他在内存中占用的内存为: 100×200(像素点) × 4(每个像素点占用的内存,默认为4.) public Bitmap.C ...
Android加载大图片OOM异常解决
Android加载大图片OOM异常解决参考文章: (1)Android加载大图片OOM异常解决 (2)https://www.cnblogs.com/jevan/archive/2012/07/05 ...
python怎么加载图片-怎样用python加载dicom图片
用python加载dicom图片的方法:使用pydicom.CV2.numpy.matplotlib等库即可.pydicom库是专门用来处理dicom图像的python专用库. python读取DIC ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...

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

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

最新文章

热门文章