jQuery 类似 YouTube 的进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18350370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube-like progress bar
提问by Swagata Barua
I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script
我正在尝试制作一个类似 YouTube 的进度条。该栏应在页面启动时加载。到目前为止，我已经尝试过这个。这是我的脚本的代码
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert('complete');
}
});
I am also including the jsFiddleof the same, http://jsfiddle.net/ajaSB/3/.
我还包括相同的jsFiddle，http://jsfiddle.net/ajaSB/3/。
In this jsfiddle, the progress bar appears, but when I use the same code in my IDE and run the file no progress bar appears. What am I doing wrong? Or if there is another way to get the bar?
在这个 jsfiddle 中，出现了进度条，但是当我在 IDE 中使用相同的代码并运行该文件时，没有出现进度条。我究竟做错了什么？或者如果有其他方法可以获得酒吧？
采纳答案by awe
Here is example of a complete HTML page including reference to the jQuery library.
这是一个完整的 HTML 页面示例，包括对 jQuery 库的引用。
Although it will mostlywork without, you should wrap your code in a
$(document).ready(...)so that you are sure all required resources are loaded before you run the code.
尽管大部分情况下它都可以工作，但您应该将代码包装在 a 中
$(document).ready(...)，以确保在运行代码之前加载了所有必需的资源。
<!DOCTYPE html>
<html>
<head>
<title>Progress Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$("#progress").css("width", _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert("complete");
}
});
});
</script>
<link href="css/progressbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="progress" class="waiting">
</body>
</html>
Note that this targets version 2 of jQuery, which does not support Internet Explorer 8and earlier. If you need support for old Internet Explorer versions, you should target jQuery 1.10.2 instead.
请注意，这适用于不支持Internet Explorer 8及更早版本的 jQuery 版本 2 。如果您需要对旧 Internet Explorer 版本的支持，则应以 jQuery 1.10.2 为目标。
If the progress bar does not show, but you do get the alert("complete")after four seconds when the animation should be finished, it is likely that your reference to the CSS is wrong (not pointing to the right place, or misspelled file name).
如果进度条没有显示，但alert("complete")在四秒后动画应该完成时你确实得到了，很可能你对 CSS 的引用是错误的（没有指向正确的地方，或者拼写错误的文件名）。
回答by Arthur Yakovlev
NProgress.jsis a very cool and simple library. The Git repository is here. It has an MIT License.
NProgress.js是一个非常酷和简单的库。Git 存储库在这里。它有一个MIT 许可证。
回答by Nathan Srivi
Demo : Fiddle
演示：小提琴
Try the following code. You must run this file into your localhost (local server).
试试下面的代码。您必须将此文件运行到您的 localhost（本地服务器）中。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert('complete');
}
});
});
</script>
<style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear
}
#progress.done {
opacity: 0
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px)
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px)
}
@-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
</style>
<div id="progress" class="waiting">
<dt></dt>
<dd></dd>
</div>
Or:
或者：
Just upload this file to your server, and then you execute the file. Definitely it works.
只需将此文件上传到您的服务器，然后执行该文件。绝对有效。
回答by HMagdy
LoadingBar.js: Adding a YouTube-Like loading bar to your website
LoadingBar.js：向您的网站添加类似 YouTube 的加载栏
YouTube has recently added a red loading bar at the top of the page to indicate that the next page is loading. You may wonder why they didn't rely on the browser's loading bar. That's because the next page is being loaded with Ajax which doesn't trigger the normal page load mechanism. That's why the browser didn't pick it up. As some of you may know, loading the entire content via Ajax can make your website load faster than the normal way.
YouTube 最近在页面顶部添加了一个红色加载栏，表示正在加载下一页。您可能想知道为什么他们不依赖浏览器的加载栏。那是因为下一个页面正在使用 Ajax 加载，这不会触发正常的页面加载机制。这就是浏览器没有选择它的原因。你们中的一些人可能知道，通过 Ajax 加载整个内容可以使您的网站加载速度比正常方式更快。
That's because all the static content is left unchanged, and only the dynamic content is being loaded. That way you don't have to keep asking the server for static content that will never change over and over creating an overload.
那是因为所有静态内容都保持不变，只有动态内容正在加载。这样你就不必不断向服务器询问永远不会改变的静态内容，从而造成过载。
Create a YouTube-Like loading bar for the web
为网络创建类似 YouTube 的加载栏
As mentioned in a blog post by Dmitry Fadeyev over at UsabilityPost, many developers are integrating this UI pattern to their websites more and more. Today I decided to build a jQuery plugin that will let you add a loading bar to any Ajax links on your website. Let me show you how it works.
正如 Dmitry Fadeyev 在 UsabilityPost 的一篇博客文章中提到的，许多开发人员越来越多地将此 UI 模式集成到他们的网站中。今天我决定构建一个 jQuery 插件，它可以让您向网站上的任何 Ajax 链接添加加载栏。让我告诉你它是如何工作的。
Basic Usage
基本用法
HTML markup
HTML 标记
<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>
JavaScript
JavaScript
$(".ajax-call").loadingbar({
target: "#loadingbar-frame",
replaceURL: false,
direction: "right",
/* Default Ajax parameters. */
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: "html",
done: function(data) {}
});
CSS customization
CSS 定制
#loadingbar {
background: YOUR COLOR;
}
#loadingbar dd, #loadingbar dt {
-moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
-ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
-webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
box-shadow: YOUR COLOR 1px 0 6px 1px;
}
And that's it. You will now have an awesome loading bar for all your Ajax calls. I hope you enjoy this :)
就是这样。您现在将拥有一个用于所有 Ajax 调用的很棒的加载栏。我希望你喜欢这个:)
回答by Rik
If you want a 'youtube-like' loader for your AJAX application that actually represents legitimate page loading progress, consider the following solution (based on Nathan Srivi's answer):
如果您想要一个实际代表合法页面加载进度的 AJAX 应用程序的“类似 youtube”的加载器，请考虑以下解决方案（基于 Nathan Srivi 的回答）：
In your .ajax()method:
在你的.ajax()方法中：
$.ajax
(
{
...
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener
(
"progress",
function( event)
{
if( event.lengthComputable )
{
var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );
// Do something with upload progress
$( '#progress' ).css( { 'width': percentComplete + '%' } );
if( percentComplete == 100 )
{
$( '#progress' ).addClass( 'finished' );
$( '#progress' ).delay( 500 ).queue
(
'fx',
function( next )
{
$( '#progress' ).addClass( 'notransition' );
$( this ).css( { width: '' } );
$( this ).removeClass( 'finished' );
next();
}
);
}
}
},
false
);
//Download progress
xhr.addEventListener
(
"progress",
function( event )
{
if( event.lengthComputable )
{
var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );
// Do something with upload progress
$( '#progress' ).css( { 'width': percentComplete + '%' } );
if( percentComplete == 100 )
{
$( '#progress' ).addClass( 'finished' );
$( '#progress' ).delay( 500 ).queue
(
'fx',
function( next )
{
$( '#progress' ).addClass( 'notransition' );
$( this ).css( { width: '' } );
$( this ).removeClass( 'finished' );
next();
}
);
}
}
},
false
);
return xhr;
},
...
success: function( data, textStatus, xhr )
{
...
// Reset our ajax loading progress bar
$( '#progress' ).removeClass( 'notransition' );
...
}
Then, in your css; use this:
然后，在你的 css 中；用这个：
#progress {
position: fixed;
opacity: 1;
z-index: 2147483647;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: #b91f1f;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress.finished {
opacity: 0 !important;
}
#progress.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
#progress dd,#progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #b91f1f 1px 0 6px 1px;
-ms-box-shadow: #b91f1f 1px 0 6px 1px;
-webkit-box-shadow: #b91f1f 1px 0 6px 1px;
box-shadow: #b91f1f 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dd {
opacity: 1;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
#progress dt {
opacity: 1;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
@-moz-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-ms-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@-o-keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes pulse {
30% {
opacity: .6
}
60% {
opacity: 0
}
100% {
opacity: .6
}
}
@keyframes pulse {
30% {
opacity: 1
}
60% {
opacity: 0
}
100% {
opacity: 1
}
}
#progress.waiting dd,#progress.waiting dt {
-moz-animation: pulse 2s ease-out 0s infinite;
-ms-animation: pulse 2s ease-out 0s infinite;
-o-animation: pulse 2s ease-out 0s infinite;
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite
}
#progress.notransition dd,#progress.notransition dt {
-moz-animation: none !important;
-ms-animation: none !important;
-o-animation: none !important;
-webkit-animation: none !important;
animation: none !important;
}
And now you should have a loader that works for each AJAX operation...and really works to represent the true percentage of how much of the response has been received, instead of just playing a fancy animation when you first load the main page.
现在你应该有一个适用于每个 AJAX 操作的加载器......并且真正用于表示已收到多少响应的真实百分比，而不是在你第一次加载主页时播放花哨的动画。
To make it operational on the initial page load (i.e. its not actually displaying legitimate progress), use the method that Nathan Srivi mentions in a document.readyfunction above and beyond what I already mentioned:
要使其在初始页面加载时运行（即它实际上并未显示合法进度），请使用 Nathan Srivi 在document.ready我已经提到的函数中提到的方法：
$( document ).ready(function() {
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert('complete');
}
});
});
Lastly,
最后，
You will need to ensure that 'Content-Length' headers are being sent to the browser in order for a loader of this design to work correctly...otherwise the event.lengthComputablemember resolves to false...and no progress bar will load.
您需要确保将“Content-Length”标头发送到浏览器，以便此设计的加载器正常工作...否则该event.lengthComputable成员解析为 false...并且不会加载任何进度条。
HTH, feel free to edit inconsistencies.
HTH，随意编辑不一致之处。
回答by naresh
Code from TalkersCode.com and tutorial here http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php
来自 TalkersCode.com 的代码和这里的教程http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php
function check_element(ele)
{
var all = document.getElementsByTagName("*");
var totalele=all.length;
var per_inc=100/all.length;
if($(ele).on())
{
var prog_width=per_inc+Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value=prog_width;
$("#bar1").animate({width:prog_width+"%"},10,function(){
if(document.getElementById("bar1").style.width=="100%")
{
$(".progress").fadeOut("slow");
}
});
}
else
{
set_ele(ele);
}
}
回答by terry
An image loading demo by Nprogressmay help.
Nprogress 的图像加载演示可能会有所帮助。
回答by Shashikant
You can get the plugin for the progress bar
I have published it on GitHub
您可以获取
我在 GitHub 上发布的进度条插件
https://github.com/shashibeit/progressbar
https://github.com/shashibeit/progressbar
you will need to include in your project and call the below functions
您将需要包含在您的项目中并调用以下函数
Progress.start();Progress.go(20);Progress.go(30);Progress.go(80);Progress.go(100);Progress.complete();
Progress.start();Progress.go(20);Progress.go(30);Progress.go(80);Progress.go(100);Progress.complete();
