spin.js
$ajax提交,菊花加载的方式和位置:
$.ajax({
type: "get",
url: "http://www.xxx.com/test.html",
beforeSend: function(XMLHttpRequest){
//ShowLoading();菊花加载事件
}, success: function(data, textStatus){
//do something
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();隐藏菊花
},
error: function(){
//请求出错处理
}
});
使用的菊花控件,spin.js:
http://spin.js.org
可以在此网址调好配置;下面的再复制过来。
使用方法:
function showSpin(){
var spinnerOpts = {
lines: 11 // 共有几条线组成
, length: 13 // 每条线的长度
, width: 8 // 每条线的长度
, radius: 19 // 内圈的大小
, scale: 0.5 // Scales overall size of the spinner
, corners: 0.1 // 圆角的程度
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.1 // Opacity of the lines
, rotate: 18 // 整体的角度(因为是个环形的,所以角度变不变其实都差不多)
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 0.8 // 速度:每秒的圈数
, trail: 55 // 高亮尾巴的长度
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // z-index的值 2e9(默认为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 // 是否要阴影
, hwaccel: false // 是否用硬件加速
, position: 'absolute' // Element positioning
};
var spinTarget = document.getElementById('main');
new Spinner(spinnerOpts).spin(spinTarget);
}
main为加载显示的区域。
ajax调用:
$.ajax({
type: "get",
url: "http://www.xxx.com/test.html",
beforeSend: function () {
showSpin();
},
success: function(data, textStatus){
//do something
},
complete: function () {
$(".spinner").hide();
},
error: function(){
//请求出错处理
}
});
spin.js的更多相关文章
- 为大家分享一个 Ajax Loading —— spin.js
我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以 ...
- 为大家分享一个 Ajax Loading —— spin.js(转)
原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...
- spin.js插件的转圈加载效果
先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...
- spin.js无图片实现loading进度条,支持但非依赖jquery
特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...
- 使用spin.js优化等待ajax返回时的页面效果
[本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...
- 加载动画插件spin.js的使用随笔
背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似 的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...
- Loading——spin.js
官网:[http://spin.js.org/] Github地址:[https://github.com/fgnass/spin.js]
- jQuery动态加载动画spin.js
在线演示 本地下载
- js spin 加载动画(loading)
js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...
随机推荐
- iOS 判断网络连接状态的几种方法
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #801b80 } p.p2 ...
- CenterOS 7 常用命令
1.防火墙开放端口 1.1 开启端口 # firewall-cmd --zone=public --add-port=80/tcp --permanent 1 ...
- iOS之访问权限以及跳转到系统界面
iOS开发中有时候有这样的需求:当用户设置不允许访问照片.麦克风和相机等系统权限的时候,这时需要直接跳转到系统的隐私界面进行设置. 判断是否开启权限 前面已经说过,我们需要在用户不允许访问的时候跳转, ...
- ASP.NET是否存在客户端控件?
在很久很久以前,传说...在ASP.NET开发中,使用服务端控件,比客户端控件更加损耗性能... 那么ASP.NET中是否有客户端控件呢? 有些人就说了,打开VS,然后在左边,工具箱里,有个HTML部 ...
- 群集中的MS DTC分布式事务协调器
MS DTC在大多数SQL 服务器下都需要安装,若只是安装数据库引擎或Analysis 服务可不安装DTC.如果后需要使用分布式事务,则可在SQL Server群集安装完成后再安装DTC. 一.群集M ...
- 斐波拉契数列加强版——时间复杂度O(1),空间复杂度O(1)
对于斐波拉契经典问题,我们都非常熟悉,通过递推公式F(n) = F(n - ) + F(n - ),我们可以在线性时间内求出第n项F(n),现在考虑斐波拉契的加强版,我们要求的项数n的范围为int范围 ...
- java实现二叉树
栈在遍历的时候不能使用for循环,因为他的size函数在动态变小.
- URI编码解码
.NET string s= System.Web.HttpUtility.UrlEncode("123", System.Text.Encoding.Unicode); //编码 ...
- shell脚本重新挂载出问题的卷
#!/bin/bash#卷的全路径示例#pathexample =mount -t cetusfs 127.0.0.1:/cinderv/var/lib/cinder/volumes/0f6a20f4 ...
- 阿里无线前端性能优化指南 (Pt.1 加载优化)
前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...