页面加载显示进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>页面加载显示进度条</title>
	<script type="text/javascript" src="serve/jquery-1.6.1.min.js"></script>		<!--引入一个jQuery文件-->
</head>
<style type="text/css">
*{
	margin:0;
}
.loading{

    background:#FF6100;		 /*设置进度条的颜色*/
    height:5px;			/*设置进度条的高度*/
    position:fixed;		/*设定进度条跟随屏幕滚动*/
    top:0;			/*将进度条固定在页面顶部*/
    z-index:99999		 /*提高进度条的优先层级,避免被其他层遮挡*/
}
</style>
<body>
	<div class="loading"></div>		<!--	这是用于显示进度条的一个容器	-->
</body>
<script type="text/javascript">
$(document).ready(function(){
	// 可能大家会问,为什么速度变成了50毫秒?因为之前一步加载为100%的动画被分成份,所以为了保证动画的连贯性,将其每份切分成为50毫秒。
	$(".loading").animate({"width":"30%"},50);
	$(".loading").animate({"width":"60%"},50);
	$(".loading").animate({"width":"70%"},50);
	$(".loading").animate({"width":"100%"},50);
	$('.loading').fadeOut('slow');		//页面加载完成, 隐藏进度条
});
</script>
</html>
时间: 2024-10-27 12:37:15

页面加载显示进度条的相关文章

网页或文件加载Loading进度条效果之二

Loading...     系统信息  版本:1.00.2012版  http://linkweb.cn/js   Dxxxxx Corporation 1999-3000

网页或文件加载Loading进度条效果之三

This works with Javscript only! 正在装载服务器配置文件......... 稍候............... [00009913] C:WINDOWSSETVER.EXE............ Uploading Successfully [00009913] C:WINDOWSWSOCK32 DLL............ Uploading Successfully [00009913] C:WINDOWSSYSTEMCFGWIZ DLL..........

网页或文件加载Loading进度条效果之一

请稍候.. dd

网页加载时页面显示进度条加载完成之后显示网页内容_javascript技巧

现在网上有很多网页加载进度条 ,但大多都是时间固定的. 下面的当查询大量数据时,网页加载较慢,在网页加载时,显示进度条,当网页加载完成时,进度条消失,显示网页已经加载完成的内容. 复制代码 代码如下: <html> <script language=VBScript> Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad() Bar = 95 SP = 10 End Function Function Count() if Bar

webview-在WebView中加载HTML页面时怎么显示进度对话框

问题描述 在WebView中加载HTML页面时怎么显示进度对话框 在程序中使用webview视图显示html页面.我想在页面加载时显示一个进度对话框.但是我加载页面后,没有显示进度对话框.我使用AsyncTask,进度对话框还是没有显示.我使用的以下代码: class DownloadAysnc extends AsyncTask<String String Void> { ProgressDialog progressDialog; @Override protected void onPr

用jQuery模拟页面加载进度条的实现代码_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

基于jQuery实现模拟页面加载进度条_jquery

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

自己动手制作基于jQuery的Web页面加载进度条插件_jquery

静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio