关键词：
【中文标题】动画进度条以显示网页的进度【英文标题】：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 是不鼓励的，所以答案应该是寻找解决方案的终点（而不是另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。获取 jquery ui 进度条以进行动画处理
】获取jqueryui进度条以进行动画处理【英文标题】：Gettingajqueryuiprogressbartoanimate【发布时间】：2012-08-0214:34:53【问题描述】：这些是用于表示进度条的两个<div>s的代码（jqueryui进度条）：<divstyle="margin-left:10px;margin-righ... 查看详情
我正在使用带有 WebView 的 LinearProgressIndicator 来显示网页渲染进度，当进度动画达到 100 时如何隐藏它？
...有WebView的LinearProgressIndicator来显示网页渲染进度，当进度动画达到100时如何隐藏它？【英文标题】：IamusingLinearProgressIndicatorwithWebViewtoshowwebpagerenderingprogress,howtohideitwhenprogressanimationreaches100?【发布时间】：2021-06-1103:50:56【问题描... 查看详情
网页加载进度条
...，会以进度条的形式，给用户进行展示。让用户可以看到动画，知道网页正在加载中) 常见的方式有以下： 1.定时器的进度条（假的） <scripttype="text/javascript"> &nbs 查看详情
制作进度条以获取 AFNetworking 3.0 的响应
】制作进度条以获取AFNetworking3.0的响应【英文标题】：MakeaprogressbarforgettheresponsewithAFNetworking3.0【发布时间】：2016-01-2111:05:58【问题描述】：我想为api调用制作进度条并以成功结束，我正在使用AFNetworking3.0版本。我执行以下代码... 查看详情
如何为 Windows 7 编写进度条以在任务栏上进行自我更新？
】如何为Windows7编写进度条以在任务栏上进行自我更新？【英文标题】：HowdoIcodeaprogressbarforWindows7toalsoupdateitselfonthetaskbar?【发布时间】：2010-11-1121:45:35【问题描述】：Windows7有一个很棒的新功能，应用程序可以通过状态栏报告当... 查看详情
如何使用逆时针动画显示自定义圆形进度条？
】如何使用逆时针动画显示自定义圆形进度条？【英文标题】：HowtodisplaycustomcircularprogressbarwithAnti-Clockwiseanimation?【发布时间】：2014-07-0313:54:48【问题描述】：我正在使用与测验相关的应用程序。此处将显示自定义圆形进度条，... 查看详情
网页加载进度条的实现
...更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载的进度，本文中我们... 查看详情
自定义进度对话框动画
】自定义进度对话框动画【英文标题】：CustomProgressDialogAnimation【发布时间】：2012-07-2213:03:09【问题描述】：我正在处理CustomProgressDialog。我已经设置了它的样式，就像在这个SO问题Positionningthespinningwheelinacustomprogressdialog中所做的... 查看详情
使用引导进度条的 Rails 动态数据进度条
】使用引导进度条的Rails动态数据进度条【英文标题】：Railsdynamicdataprogressbarusingbootrapprogressbar【发布时间】：2021-10-3001:01:17【问题描述】：您好，任何人都可以帮助尝试获取bootrap5进度条以显示我的会议表中的动态数据吗？Rails6... 查看详情
带有动画更改的自定义进度对话框的大小
】带有动画更改的自定义进度对话框的大小【英文标题】：Sizeofcustomprogressdialogwithanimationchanges【发布时间】：2019-09-0117:32:40【问题描述】：当开始应用程序开发时，我会创建一个自定义进度对话框，其中包含动画。但在进一步... 查看详情
从数据库中检索数据时如何显示加载动画或进度条？
】从数据库中检索数据时如何显示加载动画或进度条？【英文标题】：Howtoshowloadinganimationsorprogressbarswhenretrievedatafromdatabase?【发布时间】：2015-04-3017:30:41【问题描述】：每次访问此页面时，我都会从数据库中检索大约15,000行。该... 查看详情
为啥自定义进度条在android中没有动画？
】为啥自定义进度条在android中没有动画？【英文标题】：WhyCustomprogressbarisnotanimatinginandroid?为什么自定义进度条在android中没有动画？【发布时间】：2017-07-2100:57:20【问题描述】：在可能的应用程序中，我实现了自定义进度条，... 查看详情
如何在 Apple WatchKit 中为循环进度设置动画？
】如何在AppleWatchKit中为循环进度设置动画？【英文标题】：HowtoanimatecircularprogressinAppleWatchKit?【发布时间】：2015-05-0420:15:31【问题描述】：我有50个圆形图像（progress-1.png、progress-2.png等）代表一个圆圈的进度。如果我想出一个百... 查看详情
转---写一个网页进度loading
...程中为了让用户感知到load的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。 网页loading有很多用处，比如页面的加载进度，数据的加载过程等 查看详情
如何在 Alamofire 4.0 中添加带有上传进度百分比的标签的进度条
】如何在Alamofire4.0中添加带有上传进度百分比的标签的进度条【英文标题】：HowIcanaddprogressbarwithlabelwithpercentageofprogressofuploadinAlamofire4.0【发布时间】：2016-12-3112:01:18【问题描述】：我正在尝试通过Alamofire4.0将视频上传到服务器... 查看详情
如何用svg写一个环形进度条以及动画(代码片段)
...写到HTML中，所以这里我们就可以很方便的做进度条加载动画啦，这次案例以vue来做数据交互svg的viewBoxviewBox属性定义了画布上可以显示的区域，viewBox有4个值，值1为svg窗口起点显示的x坐标，值2位svg窗口起点的y坐标，后面的两个... 查看详情
基于英雄动画进度的变换
】基于英雄动画进度的变换【英文标题】：TransformationbasedonHeroanimationprogress【发布时间】：2019-07-0411:18:32【问题描述】：我想根据英雄动画的进度来转换Flutter小部件。例如，我想在将图像移动到另一个页面时逐渐剪辑图像（使... 查看详情
动画 UIView 帧 0 到 360 度作为歌曲进度条
】动画UIView帧0到360度作为歌曲进度条【英文标题】：animateanUIViewframe0to360degreeassongprogressbar【发布时间】：2015-06-3013:28:41【问题描述】：我正在播放来自互联网的音频歌曲，我想以这样的方式显示歌曲进度-请帮助我如何在歌曲持... 查看详情