Ответ 1
Есть несколько плагинов, которые уже сделали это, например nprogress.js, pace.js и это Youtube-like. Если вы хотите сделать это сами, вы можете посмотреть их код внутри.
Как показать текущий индикатор выполнения при загрузке страницы
Я хочу показать текущий индикатор выполнения, пока моя страница загружает как здесь, на моей странице. В моем примере я использовал простое загрузочное изображение, но хочу преобразовать его в текущий индикатор выполнения. Вот мой код:
$(window).load(function() {
alert("hi");
$('#loading').hide();
});#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="loading">
<img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt">
<h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>Ответы
Ответ 2
Я скопировал соответствующий код из Эта страница. Надеюсь, это поможет вам.
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data) {
//Do something success-ish
}
});
Ответ 3
В этом примере я создал индикатор выполнения JavaScript (с процентным отображением), вы можете управлять им и скрыть его с помощью JavaScript.
В этом примере индикатор прогресса продвигается каждые 100 мс. Вы можете увидеть его в JSFiddle
var elapsedTime = 0;
var interval = setInterval(function() {
timer()
}, 100);
function progressbar(percent) {
document.getElementById("prgsbarcolor").style.width = percent + '%';
document.getElementById("prgsbartext").innerHTML = percent + '%';
}
function timer() {
if (elapsedTime > 100) {
document.getElementById("prgsbartext").style.color = "#FFF";
document.getElementById("prgsbartext").innerHTML = "Completed.";
if (elapsedTime >= 107) {
clearInterval(interval);
history.go(-1);
}
} else {
progressbar(elapsedTime);
}
elapsedTime++;
}
Ответ 4
Его проблема с курицей и яйцом. Вы не сможете это сделать, потому что вам нужно загрузить активы, чтобы отобразить виджет индикатора выполнения, и к этому времени ваша страница будет полностью или частично загружена. Кроме того, вам нужно знать общий размер страницы до запроса пользователя, чтобы рассчитать процент.
Его больше хлопот, чем его ценность.
Ответ 5
Я думаю, что это то, что вы ищете Smooth Progress Bar. Это показывает индикатор выполнения, а также процент во время загрузки!
Ответ 6
Взгляните сюда,
html файл
<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'></div>
</div>
<div id="wrapper">
<div id="content">
<h1>Display Progress Bar While Page Loads Using jQuery<p>TalkersCode.com</p></h1>
</div>
</div>
js file
document.onreadystatechange = function(e) {
if (document.readyState == "interactive") {
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
set_ele(all[i]);
}
}
}
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);
}
}
function set_ele(set_element) {
check_element(set_element);
}
он определенно решает вашу проблему для полного учебника, вот ссылка http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php
Ответ 7
Простые шаги, следуйте за ними, и я думаю, что это решит вашу проблему.
Включите эти Css на свою страницу,
.progress {
position: relative;
height: 2px;
display: block;
width: 100%;
background-color: white;
border-radius: 2px;
background-clip: padding-box;
/*margin: 0.5rem 0 1rem 0;*/
overflow: hidden;
}
.progress .indeterminate {
background-color:black; }
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.progress .indeterminate:after {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s; }
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }
Затем включите индикатор выполнения вашего тега тела,
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
то он начнется с загрузки страницы, и теперь вам нужно просто скрыть это при загрузке страницы или установить видимость на ничто или скрытую, используя javascript,
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log(document.readyState);
document.getElementById("PreLoaderBar").style.display = "none";
}
}
Позвольте мне знать, сталкиваетесь ли вы с какими-либо проблемами, а также можете добавить любой тип индикатора выполнения, который вы можете легко найти, для этого примера я использовал неопределенный индикатор выполнения.