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

　　这里我们可以使用Spin.js，该js脚本压缩后5k，可以不用任何图片，任何外部CSS样式，就可以创建一个Ajax Loading指示器。

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

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

　　

　　设置之后，下图就是我们需要配置的样式：

一、显示菊花loading　

　

　<!DOCTYPE html>

　　　　<html>

　　　　　　<head>

　　　　　　　　<meta charset="UTF-8">

　　　　　　　　<title></title>

　　　　　　　　<script src="spin.min.js"></script>

　　　　　　</head>

　　　　　　<body>

　　　　　　　　<div id="loading"></div>

　　　　　　　　<script>

　　　　　　　　　　var opts = {

　　　　　　　　　　　　lines:  // The number of lines to draw

　　　　　　　　　　　　, length:  // The length of each line

　　　　　　　　　　　　, width:  // The line thickness

　　　　　　　　　　　　, radius:  // The radius of the inner circle

　　　　　　　　　　　　, scale:  // Scales overall size of the spinner

　　　　　　　　　　　　, corners:  // Corner roundness (0..1)

　　　　　　　　　　　　, color: '#000' // #rgb or #rrggbb or array of colors

　　　　　　　　　　　　, opacity: 0.25 // Opacity of the lines

　　　　　　　　　　　　, rotate:  // The rotation offset

　　　　　　　　　　　　, direction:  // 1: clockwise, -1: counterclockwise

　　　　　　　　　　　　, speed:  // Rounds per second

　　　　　　　　　　　　, trail:  // Afterglow percentage

　　　　　　　　　　　　, fps:  // Frames per second when using setTimeout() as a fallback for CSS

　　　　　　　　　　　　, zIndex: 2e9 // The z-index (defaults to 2000000000)

　　　　　　　　　　　　, className: 'spinner' // The CSS class to assign to the spinner

　　　　　　　　　　　　, top: '50%' // Top position relative to parent

　　　　　　　　　　　　, left: '50%' // Left position relative to parent

　　　　　　　　　　　　, shadow: false // Whether to render a shadow

　　　　　　　　　　　　, hwaccel: false // Whether to use hardware acceleration

　　　　　　　　　　　　, position: 'absolute' // Element positioning

　　　　　　　　　　}

　　　　　　　　　　var target = document.getElementById('loading')

　　　　　　　　　　var spinner = new Spinner(opts).spin(target);

　　　　　　　　　　//隐藏spinner

　　　　　　　　　　//spinner.spin();

　　　　　　</script>

　　　　</body>

　　</html>

二、ajax加载菊花loading效果

　　//loadAjaxSpin函数的作用是ajax调用开始前出现loading图标，数据加载完成后loading图标消失　　

　　

<!DOCTYPE html>

　　<html>

　　　　<head>

　　　　　　<meta charset="UTF-8">

　　　　　　<title></title>

　　　　　　<script src="spin.min.js"></script>

　　　　　　<script src="jquery-1.10.2.js"></script>

　　　　</head>

　　　　<body>

　　　　　　<div class="spin"></div>

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

　　　　　　<script>

　　　　　　//第一个参数为loading图标加载的标签，第二个为ajax的数据接口，第三个为回调函数

　　　　　　function loadAjaxSpin(ele,get_url,callback){

　　　　　　　　var opts = {

　　　　　　　　　　lines: , // 花瓣数目

　　　　　　　　　　length: , // 花瓣长度

　　　　　　　　　　width: , // 花瓣宽度

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

　　　　　　　　　　scale: ,

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

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

　　　　　　　　　　opacity: 0.25,

　　　　　　　　　　rotate: , // 花瓣旋转角度

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

　　　　　　　　　　speed: , // 花瓣旋转速度

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

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

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

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

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

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

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

　　　　　　　　　　position: 'absolute'

　　　　　　　　};

　　　　　　　　var spinner=new Spinner(opts);

　　　　　　　　$(ele).show();

　　　　　　　　var target=$(ele)[];

　　　　　　　　spinner.spin(target);

　　　　　　　　$.ajax({

　　　　　　　　　　url:get_url,

　　　　　　　　　　dataType:'html',

　　　　　　　　　　success:function(data){

　　　　　　　　　　　　//隐藏菊花

　　　　　　　　　　　　spinner.spin();

　　　　　　　　　　　　$(ele).hide();

　　　　　　　　　　　　callback(data);

　　　　　　　　　　}

　　　　　　　　})

　　　　　　}

　　　　　　var foo=function(data){

　　　　　　　　console.log(data);

　　　　　　}

　　　　　　$(function(){

　　　　　　　　$('#btnRequest').on('click',function(){

　　　　　　　　　　loadAjaxSpin('.spin', 'http://192.168.1.191/h5/font.html', foo);

　　　　　　　　})

　　　　　　})

　　　　</script>

　　</body>

</html>

上述代码的效果：点击后显示出菊花，等ajax加载成功之后菊花隐藏，执行回调函数。

　　

参考原文：http://www.cnblogs.com/woodk/p/5364995.html

ajax加载菊花loading效果的更多相关文章

  1. Ajax加载菊花loding效果

    Ajax 异步请求的时候,一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外 ...

  2. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  3. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. Ajax全局加载框(Loading效果)的配置

    在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 废话完成~ 实现原理: Jquery可以对ajax进 ...

  5. Android进度加载的Loading效果

    网上看到的一个开源项目的loading效果,效果很赞,记录一下: 开源项目地址如下:https://github.com/RomainPiel/Titanic

  6. Vue通过状态为页面切换添加loading、为ajax加载添加loading

    以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios. 一.为页面切换添加loading. loading.js: import Vue from 'vue ...

  7. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  8. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  9. jQuery Mobile 手动显示ajax加载器，提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

随机推荐

  1. android opencv

    最近工作需求:用opencv来先做一个demo.扫描照片进行边缘检测和透视矫正. 之后会加入照片降噪等处理. 请教了一下搞图像的同事.他的提议: 1.绿盟的“黄色照片检测” 用的是动态的opencv库 ...

  2. jQuery-图片的放大镜显示效果(不需要大小图)

    问题:当页面高度很大时,放大图片的图层不会跟随着 1.demo.html ;display:none;}          #tip s   {position:absolute;top:40px;l ...

  3. 【总结整理】arcgis js api的Map类

    关于ArcGis for javascrept之Map类   ArcGis for javascrept_ESRI_Map类:  1. 构造方法:esri.Map(); 参数: extent 如果设置 ...

  4. redis 有用

     浅谈redis   (1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正)   (2)Reids的特点 redis本质上是一 ...

  5. dpdk中uio技术

    总结一下dpdk的uio技术 一:什么是uio技术 UIO(Userspace I/O)是运行在用户空间的I/O技术,Linux系统中一般的驱动设备都是运行在内核空间,而在用户空间用应用程序调用即可, ...

  6. Linux 大页面使用与实现简介(转)

    引言 随着计算需求规模的不断增大,应用程序对内存的需求也越来越大.为了实现虚拟内存管理机制,操作系统对内存实行分页管理.自内存“分页机制”提出之始,内存页面的默认大小便被设置为 4096 字节(4KB ...

  7. PCL—关键点检测（Harris）低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5064848.html 除去NARF这种和特征检测联系比较紧密的方法外,一般来说特征检测都会对曲率变化比较剧烈的点更 ...

  8. Luogu 4409 [ZJOI2006]皇帝的烦恼

    BZOJ 1863 lyd口中的夹B递推. 挺妙的解法. 第一个感觉是找到一个最大的相邻的$a_i + a_{i - 1}$就可以了,但是这个想法大概只对了一半,一半的意思是说只有在$n$为偶数的时候 ...

  9. [raspberry pi3] 安装ffmpeg

    买了个pi3,pi相对于通常的嵌入式系统的最大好处是里面夹带了gcc编译器,有很多东西都不需要交叉编译了. arm和pc的性能还是不能比的,io的瓶颈还是很明显的, 想要编的快点还是要在pc上交叉编译 ...

  10. C#字符串拼接的三种方式

    static void Main(string[] args) { string name = "asher"; //方法1 string str1 = "hello & ...