Comment afficher une barre de progression pour le chargement des pages?

Script
1

Salut à tous, je travaille actuellement sur l’optimisation de l’expérience utilisateur pour un site web. Je cherche à mettre en place une barre de progression de chargement pour indiquer aux utilisateurs l’état de chargement des pages. Cela permettrait de rendre le site plus interactif et de donner un retour visuel sur le temps de chargement restant, améliorant ainsi la patience des utilisateurs. Des suggestions sur comment je peux le faire? Merci d’avance pour votre aide.

2 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Loading Progress</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  #progressbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 5px;
    background-color: #4CAF50;
    z-index: 9999;
    transition: width 0.5s ease;
  }

  .content {
    margin-top: 50px; /* Pour laisser de l'espace pour la barre de progression */
    padding: 20px;
  }
</style>
</head>
<body>
<div id="progressbar"></div>
<div class="content">
  <h1>Contenu de la page</h1>
  <!-- Votre contenu de page ici -->
</div>
<script>
  document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
      // Page partiellement chargée, affichage de la barre de progression
      document.getElementById('progressbar').style.width = '30%';
    } else if (document.readyState === "complete") {
      // Page entièrement chargée, masquage de la barre de progression
      document.getElementById('progressbar').style.width = '100%';
      setTimeout(function() {
        document.getElementById('progressbar').style.opacity = '0';
        setTimeout(function() {
          document.getElementById('progressbar').style.display = 'none';
        }, 500);
      }, 500);
    }
  };
</script>
</body>
</html>
3

  1. Pace.js : C’est une librairie JavaScript automatique qui ajoute une belle barre de progression en haut de la page à chaque chargement. C’est gratuit et open source. GitHub - CodeByZach/pace: Automatically add a progress bar to your site.

  2. NProgress.js : Il s’agit d’une autre librairie JavaScript pour les barres de progression. Elle est minuscule (~2kb) et minimaliste, mais reste très flexible. C’est gratuit et open source. NProgress: slim progress bars in JavaScript

  3. P-Loading : C’est un plugin jQuery puissant et configurable pour créer des animations de chargement (avec ou sans barre de progression). C’est gratuit et open source. GitHub - joseshiru/p-loading: An elegant responsive loading mask.

  4. LoadGo : Un plugin jQuery qui permet d’ajouter une animation de progression de chargement à une image de votre choix. C’est gratuit et open source. GitHub - franverona/loadgo: LoadGo is a Javascript plugin for using your logo as a progress bar.

  5. Nanobar.js : Une autre librairie JavaScript très légère pour les barres de progression. C’est gratuit et open source. http://nanobar.micronube.com/

  6. ProgressBar.js : C’est une belle et réactive barre de progression avec des animations animées sur SVG. C’est gratuit et open source. ProgressBar.js - Progress bars with JavaScript

  7. Topbar : Une autre petite librairie pour les barres de progression en haut de la page. C’est gratuit et open source. topbar by buunguyen

  8. ProgressJs : Une librairie JavaScript qui aide à créer et à gérer les barres de progression pour chaque objet sur la page. C’est gratuit et open source. Progress.js - Themeable progress bar library

  9. Progressbar.js : Une autre librairie pour créer des barres de progression animées en utilisant SVG. C’est gratuit et open source. https://progressbarjs.readthedocs.io/

  10. Ladda : Un ensemble d’outils pour créer des boutons de chargement et des barres de progression. Il est intégré avec les boutons pour fournir un retour visuel. C’est gratuit et open source. Ladda for Bootstrap 3 UI