背景：

在请求后台的“漫长”等待过程中，为了提升用户体验，需要一个类似  的加载动画效果，让用户明确现在处于请求过程中，而不是机子down掉或者网站死了

静态demo（未与后台交互）：

HTML代码如下

<!doctype html>

<html>

    <head>

        <title>Test Spin Demo</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <script type="text/javascript" src="http://spin.js.org/spin.min.js" ></script>

        <style>

            #Div{

                width: 100%;

                height: 100%;

                text-align:center;

            }

            #firstDiv{

                width: 100%;

                height: 50%;

            }

            #secondDiv{

                width: 50%;

                height: 50%;

                margin:0 auto;

            }

        </style>

        <script type="text/javascript">

            //opts 样式可从网站在线制作

            var opts = {

                lines: 13, // 花瓣数目

                length: 20, // 花瓣长度

                width: 10, // 花瓣宽度

                radius: 30, // 花瓣距中心半径

                corners: 1, // 花瓣圆滑度 (0-1)

                rotate: 0, // 花瓣旋转角度

                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针

                color: '#000', // 花瓣颜色

                speed: 1, // 花瓣旋转速度

                trail: 60, // 花瓣旋转时的拖影(百分比)

                shadow: false, // 花瓣是否显示阴影

                hwaccel: false, //spinner 是否启用硬件加速及高速旋转

                className: 'spinner', // spinner css 样式名称

                zIndex: 2e9, // spinner的z轴 (默认是2000000000)

                top: '25%', // spinner 相对父容器Top定位 单位 px

                left: '50%'// spinner 相对父容器Left定位 单位 px

            };

            var spinner = new Spinner(opts);

            $(document).ready(function () {

                $("#btnRequest").bind("click", function () {

                    Request();

                });

                $("#btnRequest2").bind("click", function () {

                   Request2();

                });

            })

            function Request(){

                //请求时spinner出现

                var target = $("#firstDiv").get(0);

                spinner.spin(target);

            }

            function Request2(){

                //关闭spinner

                spinner.spin();

            }

        </script>

    </head>

    <body>

        <div id="Div">

            <div id="firstDiv">

            </div>

            <div id="secondDiv">

                <input id="btnRequest" type="button" value="显示加载" class="btnStyle" />

                <input id="btnRequest2" type="button" value="隐藏加载" class="btnStyle" />

            </div>

        </div>

    </body>

</html>

提示：

一、其中opts样式可在http://spin.js.org/在线制作与测试

var opts = {

                lines: 13, // 花瓣数目

                length: 20, // 花瓣长度

                width: 10, // 花瓣宽度

                radius: 30, // 花瓣距中心半径

                corners: 1, // 花瓣圆滑度 (0-1)

                rotate: 0, // 花瓣旋转角度

                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针

                color: '#000', // 花瓣颜色

                speed: 1, // 花瓣旋转速度

                trail: 60, // 花瓣旋转时的拖影(百分比)

                shadow: false, // 花瓣是否显示阴影

                hwaccel: false, //spinner 是否启用硬件加速及高速旋转

                className: 'spinner', // spinner css 样式名称

                zIndex: 2e9, // spinner的z轴 (默认是2000000000)

                top: '25%', // spinner 相对父容器Top定位 单位 px

                left: '50%'// spinner 相对父容器Left定位 单位 px

            };

二、spin.js+自制遮罩（暂时还没有找到插件本身自带的遮罩层）

背景：想要在显示加载状态时，父层为不可编辑状态

在页面最后、</body>之前添加div遮罩层

<div id="mb"></div>

设置遮罩层的样式

#mb{

    display: none;

    height: 100%;

    width: 100%;

    position: fixed;

    *position: absolute;

    *height: 1380px;

    background: black;

    top:;

    left:;

    opacity:0.6;

}

最后通过js控制遮罩的显示与隐藏

//显示

$("#mb").css("display","block");

var target = $(".firstDiv").get(0);

spinner.spin(target);

//隐藏

$("#mb").css("display","none");

spinner.spin();

效果如下，此时父层为不可编辑状态：

加载动画插件spin.js的使用随笔的更多相关文章

  1. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  2. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  3. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

  4. js spin 加载动画（loading）

    js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...

  5. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  6. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  7. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  8. 使用 JS 嵌入的方式来加载 Flash 插件，在各浏览器中播放视频

    嵌入插件 使用 object 和 embed 标签 这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的.浏览器兼容性,有的浏 ...

  9. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

随机推荐

  1. JAVA正则表达式之 Pattern介绍

    1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它包括两个类:Pattern和Matcher. Pattern 一个Pattern是一个正则表 ...

  2. 天梯赛L2-006. 树的遍历L3-010. 是否完全二叉搜索树

    L2-006. 树的遍历 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历 ...

  3. Linux之configure make make install

    正常的编译安装/卸载: 源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install).   configure文件是一个可执行的脚本文件,它有很多选项, ...

  4. mysql由浅入深探究（四）----mysql事务详解

    什么是事务: 通俗的解释就是对数据库进行的一组完整的操作,这组完整的操作中包含一个或多个操作.解释的太low了,来点官方的:事务就是DBMS中执行的一个完整的逻辑单元,这个逻辑单元中包含一个或者多个操 ...

  5. Java 环境问题汇总

    准备java环境时,需要设置JAVA_HOME 和 Path , CLASSPATH 环境变量,它们可以是用户变量,也可以是系统变量. 注意: 系统变量的路径排在用户变量之前. 其中,Windows操 ...

  6. P2152 [SDOI2009]SuperGCD

    传送门 非常显du然liu的一道题 就是求GCD 因为数据范围... 所以要上压位高精+非递归的辗转相减 关于辗转相减: 如果 A是二的倍数,B是二的倍数   那么GCD(A,B)=2 * GCD(A ...

  7. hdu2466-Shell Pyramid

    先预处理一下层和行所对应的数,然后二分三个答案,注意细节   #include<cstdio> #define inf 0x3f3f3f3f ; typedef __int64 LL; u ...

  8. 最长回文子串--轻松理解Manacher算法

    最长回文子串这个问题的Manacher算法,看了很多博客,好不容易理解了,做一下记录. 这个算法的核心就是:将已经查询过的子字符串的最右端下标保存下来,在计算下标为i的回文字符串时,不需要从左右相邻的 ...

  9. Netty（6）关闭

      客户端: public static void main(String[] args) throws Exception { final SslContext sslCtx; if (SSL) { ...

  10. STM32空闲中断

    收发共存的思路没有经过验证!!! 空闲中断:既可以用来作为不定长接收数据帧的断帧判断/特别是DMA数据的接收,也可以用来指示中断发送的结束. 在需要发送的地方USART_ITConfig(UART5, ...