动画进度条以显示网页的进度

Posted

技术标签:

【中文标题】动画进度条以显示网页的进度【英文标题】:animating progress bar to show the progress of web page 【发布时间】:2013-08-12 02:20:56 【问题描述】:

我的页面顶部有一个进度条,我希望该条显示网页加载的进度。当整个页面加载时,我希望栏显示 100%。我很确定我需要列出一个变量 '$(window).load();'但我不确定在哪里。

我的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
progress 
width: 100%;
height: 5px;
top: 0;
left: 0;
position: absolute;
color: #1990c8;
appearance: none;
-webkit-appearance: none;
-o-appearance: none;

progress::-moz-progress-bar  
background: #1990c8;

progress::-webkit-progress-value 
background: #1990c8;

progress::-webkit-progress-bar 
background: #e1e1e1;

</style>
</head>
<body>
<progress id="progressbar" value="0" max="100"></progress>
<span id="status"></span>
<script type="text/javascript" language="javascript">
function progressbaranimation(a) 
var bar = document.getElementById('progressbar');
bar.value = a;
a++;
var sim = setTimeout("progressbaranimation("+a+")");

var amount = 0;
progressbaranimation(amount);
</script>
<img src="http://media.npr.org/images/picture-show-flickr-promo.jpg">
<img src="http://dd508hmafkqws.cloudfront.net/sites/default/files/mediaimages/gallery/2012/Dec/AA-502716%20(1).jpg">
</body>
</html>

【问题讨论】:

【参考方案1】:

您可以使用基本的 javascript 来做到这一点。 检查这个http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

【讨论】:

请注意 link-only answers 是不鼓励的,所以答案应该是寻找解决方案的终点(而不是另一个参考中途停留,随着时间的推移往往会变得陈旧)。请考虑在此处添加独立的概要,并保留链接作为参考。

以上是关于动画进度条以显示网页的进度的主要内容,如果未能解决你的问题,请参考以下文章

使用引导进度条以模态显示上传进度

如何为 Windows 7 编写进度条以在任务栏上进行自我更新?

制作进度条以获取 AFNetworking 3.0 的响应

网页加载进度条

使用引导进度条的 Rails 动态数据进度条

网页加载进度条的实现