加载进度圈,带遮罩层(jquery)

如图:

Js下载地址:http://files.cnblogs.com/files/holdon521/cvi_busy_lib.js

如下使用实例:

<script src="/static/js/cvi_busy_lib.js"></script>

<script type="text/javascript">

var xval=getBusyOverlay(‘viewport‘,{color:‘white‘, opacity:0.75, text:‘viewport: loading...‘, style:‘text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white‘},{color:‘#ff0‘, size:100, type:‘o‘});
                $.ajax({
                    url : ‘${ctx}/login/tologin‘,
                    type : ‘POST‘,
                    dataType : ‘json‘,
                    beforeSend:function(){
                        if(xval) {
                                xval.settext("正在登录,请稍后......");
                        }
                    },
                    success : function(result) {
                        xval.remove();
                        if (result.success) {
                            document.location = "${ctx}/";
                        }                   });</script>
时间: 2024-08-29 21:38:35

加载进度圈,带遮罩层(jquery)的相关文章

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

cvi_busy_lib.js: cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......")

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

【android】带加载进度条的WebView (附demo下载)

/** * * 此WebViewWithProgress继承自Relativielayout, * 如果要设置webview的属性,要先调用getWebView()来取得 * webview的实例 * * @author Administrator * */ public class WebViewWithProgress extends RelativeLayout{ private Context context; private WebView mWebView = null; //水平进

仿微信中加载网页时带线行进度条的WebView的实现

finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来看一下微信中的效果是什么样的: 明确需求之后,我们来开始动手做,首先我们来自定义一个带进度条的WebView,名字为ProgressWebView: /** * @Description:带进度条的WebView * @author http://blog.csdn.net/finddreams *

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了. 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教. var PopDialogDefaultConfig = { hasCover: true, //是否带遮罩层 colorOfCover: "#000", //遮罩层颜色 transparencyOfCover: 80, //遮罩层透明度(alpha值,opacity值通过换算得到) bo

pace.js和NProgress.js两个加载进度插件的一点小总结

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NProgress.js NProgress是基于jquery的,且版本要 >1.8 API: NProgress.start() — 启动进度条 NProgress.set(0.4) — 将进度设置到具体的百分比位置 NProgress.inc() — 少量增加进度 NProgress.done() 

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

网页加载进度条的JS程序开发思路与实际应用

一款好的产品,都需要有一个漂亮的loading界面.lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感. loading进度条更是对当前加载进度的一个良好反馈.从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面.带有进度条的loading界面在程序中并不罕见,但是在web中呢?到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度,所以无法直接.便捷的获得页面加载进度的反馈.本文主要是讲述如何以通过jquery的方式来实现页面加载进度的

网页加载进度页面

最近在做报表开发的时候,由于有一个报表是查的交易流水表,所以导致页面出来的有点慢,于是就想着在页面显示之前,加一个页面,告诉用户页面正在加载,提高友好性. 在网上搜了很多资料之后,决定使用pace.js这个控件来实现,pace.js的使用非常简便,只需调用几个API即可,里面也提供了很多css效果供选择,自己在本地测试项目中测试了一下,确实可用.网上的教程大多推荐使用pace.start和pace.done来完成调用,但我发现pace自带的示例里面,有更简单的调用方法,代码如下: <head>