Comment afficher une barre de progression en cours d'exécution pendant la chargement de la page

Il existe quelques plugins déjà réalisés tels que nprogress.js , pace.js et ce type de Youtube . Si vous voulez le faire vous-même, vous pouvez regarder leur code à l'intérieur.

J'ai copié le code pertinent ci-dessous dans cette page . J'espère que cela pourrait vous aider.

 $.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 } }); 

Dans cet exemple, j'ai créé une barre de progression JavaScript (avec affichage en pourcentage), vous pouvez la contrôler et la cacher avec JavaScript.

Dans cet échantillon, la barre de progression avance toutes les 100 ms. Vous pouvez le voir dans 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++; } 

Regardez ici,

Fichier 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> 

Fichier js

 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); } 

Il résout définitivement votre problème pour un tutoriel complet ici est le lien http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php

C'est un problème de poulet et d'oeuf. Vous ne pourrez pas le faire car vous devez charger les éléments actifs pour afficher le widget de la barre de progression, au cours duquel votre page sera téléchargée en totalité ou en partie. En outre, vous devez connaître la taille totale de la page avant l'utilisateur demandant afin de calculer un pourcentage.

C'est plus marrant que ça vaut.

Je pense que c'est ce que vous recherchez pour Smooth Progress Bar . Cela montre une barre de progression ainsi qu'un pourcentage pendant le chargement!

Étapes simples, suivez-les et je suppose que cela résoudra votre problème

Incluez ces Css dans votre page,

 .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%; } } 

Ensuite, inclure la barre de progression de votre étiquette de corps,

 <div class="progress" id="PreLoaderBar"> <div class="indeterminate"></div> </div> 

Alors il va démarrer à mesure que votre page est chargée, et maintenant, ce que vous devez faire, c'est de cacher cela lorsque la page est chargée, ou de définir la visibilité sur aucune, ou cachée, en utilisant javascript,

 document.onreadystatechange = function () { if (document.readyState === "complete") { console.log(document.readyState); document.getElementById("PreLoaderBar").style.display = "none"; } } 

Permettez-moi de savoir si vous rencontrez des problèmes et que vous pouvez ajouter n'importe quel type de barre de progression, vous pouvez les trouver facilement, pour cet exemple, j'ai utilisé une barre de progression indéterminée.