我们在做Ajax 异步请求的时候，一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ，以便增加用户体验。

今天在网上发现了一个 Spin.js ，该 js 脚本压缩后5k，可以不用任何图片，任何外部的CSS样式，就可以创建一个Ajax Loading 指示器，且兼容以下浏览器：

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

我们可以在链接页面中，动态设置样式同时会自动生成样式的配置脚本：

Spin.js 用法极其的简单：

显示 spinner

//target为显示spiner的父容器
var target=document.getElementById("id")
spinner.spin(target);

隐藏 spinner
 spinner.spin();

我们来做一个简单完整的例子，来体验一次吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Ajax Loading Demo</title>

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

    <!--原版压缩spin.js-->

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

    <link href="css/index.css" rel="stylesheet" type="text/css" />

    <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: '#5882FA', // 花瓣颜色

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

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

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

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

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

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

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

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

        };

        var spinner = new Spinner(opts);

        $(document).ready(function () {

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

                ajaxRequestData();

            })

        })

        function ajaxRequestData(){

            $.ajax({

                type: "POST",

                timeout: 10000,

                dataType: "text",

                url: "Index.ashx",

                beforeSend: function () {

                    //异步请求时spinner出现

                    $("#firstDiv").text("");

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

                    spinner.spin(target);

                },

                success: function (msg) {

                    $("#firstDiv").text(msg);

                    //关闭spinner

                    spinner.spin();

                },

                error: function (e, jqxhr, settings, exception) {

                    $("#firstDiv").text("请求发生错误...");

                    //关闭spinner

                    spinner.spin();

                }

            })

        }

    </script>

</head>

<body>

    <div id="firstDiv">

    </div>

    <div id="secondDiv">

        <input id="btnRequest" type="button" value="请求数据" class="btnStyle" />

    </div>

</body>

</html>

点击“请求数据”按钮，效果如下图所示：

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

比如可将Spin.js 扩展成中间显示网站的logo，如下图所示：

代码十分的简单，好了，话不多说，另外再给大家提供一个在线设计 ajax loading gif 的网址：http://www.ajaxload.info/

-==本文源码下载==-

为大家分享一个 Ajax Loading —— spin.js的更多相关文章

  1. 为大家分享一个 Ajax Loading —— spin.js（转）

    原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...

  2. Loading——spin.js

    官网:[http://spin.js.org/] Github地址:[https://github.com/fgnass/spin.js]

  3. 分享一个延迟加载图片的JS

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 分享一个tom大叔的js 深入理解系列 (有助于提升)

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172

  5. 使用spin.js优化等待ajax返回时的页面效果

    [本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...

  6. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  7. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  8. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  9. 分享一个快速设置背景的js 自动获取背景图的长宽

    我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...

随机推荐

  1. Hive几种数据导出方式

    Hive几种数据导出方式 今天我们再谈谈Hive中的几种不同的数据导出方式.可以根据导出的地方不一样,将这些方式分为三种: (1).导出到本地文件系统: (2).导出到HDFS中: (3).导出到Hi ...

  2. OpenMP之求和（用section分块完成）

    // Sum_section.cpp : 定义控制台应用程序的入口点. //section功能:; //1.指定其内部的代码划分给线程中某个线程,不同的section由不同的线程执行; //2.将一个 ...

  3. 对bit、byte、TByte、Char、string、进制的认识

    在学校老师就教1byte = 8bit,一个Byte在内存中占8个房间.每个房间都有门牌号.找到内存中的内容就找门牌号,寻址什么的,虽然在听,但是脑袋里一头雾水,到现在只知道会用就行,但原理也不是那么 ...

  4. StoryBoard 简单使用

    StoryBoard简单使用 故事版(storyboard)是一种简洁的图形界面,程序员可以采取拖的形式搭建一个界面,现在使用的xcode默认都会创建一个main.storyboard,作为app的入 ...

  5. HTML5实战１

    第一章 1.搭建环境,wamp 2.检查浏览器是否支持html5 ,是否支持新标签<canvas></canvas> 3.简单高效,少用id,多用标签. 4.使用css3美化样 ...

  6. python easy_install pip django

    1. install python (2.7.8) 2. set PATH, add python27 3. python easy_install.py 4. easy_install pip 5. ...

  7. JAVA使用POI操作excel

    文中处理的excel是2003年以前的版本,使用HSSFworkbook,如果处理2007版本以后的excel,用XSSFworkbook,对于二者的兼容性问题,可参考 http://blog.csd ...

  8. halcon读取一张照片，并转化为灰度图像

    dev_close_window () read_image (Image, 'E:/图片/123.jpg') get_image_size (Image, Width, Height) dev_op ...

  9. 测试RAC的功能

    1.查看RAC服务状态 node1-> crs_stat -t Name           Type           Target    State     Host ---------- ...

  10. 《Linux内核设计与实现》读书笔记 - 目录 （完结）

    读完这本书回过头才发现, 第一篇笔记居然是 2012年8月发的, 将近一年半的时间才看完这本书(汗!!!). 为了方便以后查看, 做个<Linux内核设计与实现>读书笔记 的目录: < ...