此插件是基于jqueryUI的widget,下面是具体实现代码

第一部分css:

/***loading***/
.loading-box{ position:absolute; text-align:center;}
.loading-box .loading-message{ height:30px; line-height:30px; color:#999999;}
.sideslip{background-color:#f9f9f9; font-size:12px; color:#666666;position:relative;}
.scroll-box{ margin:1px auto 0px auto; }

第二部分jquery:

(function($,undefined){
$.widget('ui.loading', {
options: {
loadingStyle: { backgroundColor: '#F3F3F3' },
message: '任务加载中'
},
_create: function () {
this.html = '<div class="loading"><div class="loading-box"><div class="loading-img"><img src="/Images/282.GIF" width="32" height="32" alt=""/></div><div class="loading-message"></div></div></div>'; },
show: function () {
var wrapW = this.element.innerWidth(),
wrapH = this.element.innerHeight();
this.loadingHtml = $(this.html).appendTo(this.element).css(this.options.loadingStyle).css({ width: wrapW, height: wrapH, position: 'absolute', top: 0, left: 0 });
this.loadingHtml.find('.loading-box').position({ my: 'center center', at: 'center center-10%', of: this.loadingHtml });
this.loadingHtml.find('.loading-message').text(this.options.message); },
hide: function () {
if (this.loadingHtml != undefined) {
this.loadingHtml.remove();
}
}
});
})(jQuery)

第三部分调用:

  这里需要说明下,首先需要初始化loading,如下面例子:

//初始化loading
$('.sideslip').loading();

  最后通过window.setTimeOut()来设置延时时间,下面的例子是延迟两秒后隐藏loading

$('.sideslip').loading('show');
window.setTimeout(function () {
$('.sideslip').loading('hide');
}, 2000);

纯js+css实现loading等待效果的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

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

  2. js+css实现带缓冲效果右键弹出菜单

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

  3. 手机站全局的html+css加载等待效果

    本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

  4. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

  5. 纯JS.CSS编写的可拖拽并左右分栏的插件(复制代码就能用)

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  6. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  7. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  8. loading等待效果

    效果预览:这两个球一直在转,不能进行其他操作 div放在最外层 <div id="loadingImg" style="height: 100%;width: 10 ...

  9. AJAX 的 Ajax返回数据之前的loading等待效果(gif效果等)

    首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...

随机推荐

  1. MongoDB学习笔记~以匿名对象做为查询参数,方便查询子对象

    回到目录 对于MongoDB的封装还在继续,对于不断追求简单的编程还在继续,对于喜欢代码的那么感觉,还在继续... 当你的mongo数据表里有子对象时,尤其是列表对象时,使用官方的驱动很是不爽,要记得 ...

  2. SQL Server中截取字符串常用函数

    SQL Server 中截取字符串常用的函数: .LEFT ( character_expression , integer_expression ) 函数说明:LEFT ( '源字符串' , '要截 ...

  3. Nodejs以后台服务启动

    1: 从网上查找  LINUX中我们可以使用这种简单的方式让node.js在后台运行: nohup node your_app.js & 经多次实验一直没有成功   2:使用 forever ...

  4. 按日子来干活——第一个Blog Day&Happy Day

    今天(周一)看到一位同仁的生活规划,感觉挺适合我,实践一下,就theo&tools day+code day+blog day,间歇性有happy day嘛~ blog day这样做,一篇bl ...

  5. linux Shell脚本编码格式

    在windows下开发,写好的shell脚本,放到linux上执行,往往会因为编码格式的问题存在兼容问题: -bash: ./lbs-circle-server.sh: /bin/sh^M: bad ...

  6. codePrinter

    3天前,荆老师给了我一台打印机,让我完成省赛代码打印系统的测试. 打印机型号为 HP P1007,算是一台比较老的打印了. 本文记录了从打印机驱动安装到代码打印WEB部署的全过程 1. 安装打印机驱动 ...

  7. size_t和size_type

    size_t和size_type是为了独立于及其而定义的类型,因为比如在一台电脑上int为2b,而另一台电脑上是4b,这样就给程序的可移植性带来了麻烦.为了解决这个问题,在库内定义了如上类型,其实si ...

  8. bzoj-4518 4518: [Sdoi2016]征途(斜率优化dp)

    题目链接: 4518: [Sdoi2016]征途 Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到达T地 ...

  9. 图像处理工具V1.0

    图像处理工具V1.0(仿彗星图片处理工具.VS2015安装界面)----个人无聊作品 以下是界面: 部分代码一.(摘自网络----加水印代码): public static void ImageWat ...

  10. NOIP2013花匠

    描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比较别致. 具体而言, ...