`
月亮不懂夜的黑
  • 浏览: 155583 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面加载中效果实现

 
阅读更多

1、加载的loading.css

@charset "UTF-8";
/* LOGIN CSS */

.background { 
	display: block; 
	width: 100%; 
	height: 100%; 
	opacity: 0.4; 
	filter: alpha(opacity=40); 
	background:#f1f1f1;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 10000; 
} 
.progressBar { 
	background: white url(../img/loading.gif) no-repeat 10px 10px; 
} 
.progressBar { 
	display: block; 
	width: 148px; 
	height: 28px; 
	position: fixed; 
	top: 50%; 
	left: 50%; 
	margin-left: -74px; 
	margin-top: -14px; 
	padding: 10px 10px 10px 50px; 
	text-align: left; 
	line-height: 27px; 
	font-weight: bold; 
	position: absolute; 
	z-index: 10001; 
} 

   注意:background部分的position: fixed;否则,只能在当前区域内遮盖

2、页面引用

<!-- shade div start -->
	<div id="background" class="background" style="display: none; "></div> 
	<div id="progressBar" class="progressBar" style="display: none; ">Loading...</div> 
<!-- shade div end -->

3、遮罩的显示与隐藏

//遮罩效果显示
$("#background,#progressBar").show();
//遮罩效果隐藏
$("#background,#progressBar").hide();

  

 

 

 

分享到:
评论

相关推荐

    html5 网页加载中效果

    总的来说,HTML5不仅提供了丰富的功能,还赋予了开发者更多创造性的自由,使得网页加载效果、提示和确认对话框等交互元素能够更加贴合用户需求和平台特性。通过不断学习和实践,开发者可以创建出更具吸引力和用户...

    H5多种加载效果loading,H5页面加载中动画

    本话题将深入探讨"H5多种加载效果loading",即H5页面在加载过程中使用的炫酷动画,旨在提升用户在等待页面完全加载时的体验。 一、什么是H5加载效果 H5加载效果,也称为“loading”或“预加载”,是指在页面内容...

    jquery页面加载效果

    在网页设计中,用户体验是至关重要的,而页面加载效果正是提升用户体验的一种手段。"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使...

    JSP页面加载时提示"正在加载中"

    任何jsp页面只要使用包含附件中的loading.jsp将自动拥有“页面正在加载的。。”提示信息,在页面加载完后将自动隐藏。 我为什么使用这个组件? 1。交互性。 客户清楚知道,你的页面是在加载,需要等待,而不用...

    30种页面加载效果.zip

    在网页设计中,用户体验是至关重要的,而页面加载效果正是其中的一个关键环节。"30种页面加载效果.zip"这个压缩包文件包含了30个不同的页面加载(loading)动画示例,旨在提升用户在等待页面完全加载时的视觉体验。...

    Html未加载完成时实现动态加载效果

    为了改善这种情况,开发者通常会采用动态加载效果来展示页面加载进度,让用户感知到网页正在积极加载,而不是停滞不前。本文将深入探讨如何在HTML未加载完成时实现动态加载效果,并通过实例代码进行说明。 首先,...

    页面加载时 提示 正在加载中

    这里的`loading`是`loading.jsp`中加载提示元素的ID,通过修改其`display`属性为`none`,可以实现隐藏效果。 此外,为了提高用户体验,`loading.jsp`的加载提示通常会设计成吸引人的动画效果,比如旋转的加载图标、...

    winform loading加载框效果

    - **代码示例**:展示了如何在Winform应用程序中实现加载框效果,可能包含C#或VB.NET的代码文件。 - **资源文件**:可能包含加载框的图片、图标或其他视觉元素。 - **示例项目**:一个运行示例,展示加载框实际运行...

    3种加载中效果-打包下载

    本资源包提供了三种JavaScript实现的加载中效果,适合那些希望为自己的网站或应用添加动态加载效果的开发者。 首先,我们来看“WEB页面正在加载.rar”这个文件,这可能包含了一种加载中效果的实现。在网页加载过程...

    css3个性页面加载动画效果

    第三种可能是一种文字加载效果,比如字母逐个出现或消失。利用CSS3选择器(如`:nth-child()`)和`animation-delay`属性,我们可以控制每个字符出现的时间,营造出文字逐渐显现的视觉效果。 第四种样式可能是基于...

    正在加载页面中

    在提供的压缩包文件"12月18日页面正在加载中"中,可能包含了实现这个加载效果的HTML文件、CSS样式表和JavaScript脚本。用户可以通过解压文件,查看这些源代码来学习如何实现类似的效果。这为开发者提供了一个实践...

    ASP.NET实现网页预加载效果

    在网页预加载效果的实现中,ASP.NET 提供了丰富的工具和技术,可以帮助开发者优化用户体验,使得用户在等待页面加载时能感知到进度,从而提高网站的交互性和吸引力。 网页预加载是一种优化网页性能的技术,它在用户...

    js实现页面加载完毕之前loading提示效果

    在本文中,我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前,向用户展示一个“页面加载中,请稍后...”的提示,以提升用户体验,避免用户在等待...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    HTML5页面加载动画是网页设计中的一个重要元素,它在页面内容完全加载之前为用户提供视觉反馈,使得用户体验更加流畅。本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的,无需任何第三...

    四款由html+css+js实现的精美网页加载页面动画源码

    本资源提供了四款由HTML、CSS和JavaScript共同实现的精美网页加载页面动画源码,旨在帮助开发者或设计师打造更具吸引力的网站。 1. HTML基础与结构 HTML(超文本标记语言)是网页的基础,负责构建页面的结构。在这...

    jquery 实现的等待加载页面

    在网页开发中,提供良好的用户体验是至关重要的,特别是在页面加载过程中。"jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery,一个强大的JavaScript库,简化了DOM操作、事件处理和动画...

    页面加载效果

    "fakeloader"是一种常见的页面加载效果实现方式,它通常由JavaScript和CSS技术配合完成,能够创建出各种创意且吸引人的加载动画。 在提供的压缩包文件中,包含了多个HTML示例(index.html、readme.html以及多个demo...

    js加载页面等待效果

    在网页加载过程中,为了提供更好的用户体验,开发者经常使用JS来实现页面等待效果,即在内容完全加载之前展示一个等待动画或者提示,让用户知道页面正在努力加载。 "js加载页面等待效果"主要涉及到以下几个关键知识...

    页面加载等待效果

    为了解决这个问题,"页面加载等待效果"被广泛采用,它在页面内容实际加载的过程中,向用户提供一种视觉反馈,让他们知道网站正在努力处理信息,并非停滞不前。这种效果通常表现为一个旋转的加载图标,也称为菊花图或...

    实用网页加载等待效果+带60多款GIF动画效果

    网页加载等待效果是用户体验设计中的一个重要环节,尤其是在大型或复杂网站中,用户在等待页面完全加载时可能会感到不耐烦。这种效果通过显示动画或动态图标来告知用户系统正在处理请求,提供一种视觉反馈,从而改善...

Global site tag (gtag.js) - Google Analytics