Je partage avec vous aujourd’hui une fonctionnalité que je trouve très pratique de mettre dans les pages web de mes projets, une barre de progression indiquant le chargement de la page. Tellement facile à mettre en place que je me suis dis, que certains le trouveraient aussi peut-être intéressant.

pace.js progress bar load

Pace.js

Je n’ai pas eu besoin de chercher d’autres alternatifs car pace.js réalise de manière assez simple ce qu’on veut bien. La mise en place est très simple. Vous avez juste besoin de :

  1. Charger le script pace.min.js avant la balise </body> dans la page où vous voulez voir la barre de progression
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title>Ma page</title>
       </head>
       <body>
         
          <script src="dossier/vers/pace.min.js"></script>
          <!-- 
            Ou depuis un CDN
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
          -->
       </body>
    </html>

     

  2. Choisir son thème parmi tant d’autres qui existe
  3. Inclure le code CSS du thème dans la page où on veut voir la barre de progression, vous pouvez aussi écrire le code css dans un fichier externe et l’inclure avec la balise link
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title>Ma page</title>
          <style>
              .pace {
                  -webkit-pointer-events: none;
                  pointer-events: none;
      
                 -webkit-user-select: none;
                 -moz-user-select: none;
                  user-select: none;
    
                  position: fixed;
                  top: 0;
                  left: 0;
                  width: 100%;
    
                 -webkit-transform: translate3d(0, -50px, 0);
                 -ms-transform: translate3d(0, -50px, 0);
                  transform: translate3d(0, -50px, 0);
    
                 -webkit-transition: -webkit-transform .5s ease-out;
                 -ms-transition: -webkit-transform .5s ease-out;
                  transition: transform .5s ease-out;
                 }
    
              .pace.pace-active {
                 -webkit-transform: translate3d(0, 0, 0);
                 -ms-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
               }
    
              .pace .pace-progress {
                  display: block;
                  position: fixed;
                  z-index: 2000;
                  top: 0;
                  right: 100%;
                  width: 100%;
                  height: 10px;
                  background: #29d;
    
                  pointer-events: none;
               }
          </style>
       </head>
       <body>
         
          <script src="dossier/vers/pace.min.js"></script>
          <!-- 
            Ou depuis un CDN
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
          -->
       </body>
    </html>

Et on a le résultat sans besoin de faire quoi que ce soit.

Configuration

Pace.min.js accepte deux possibilités de lui fournir les options ou configurations

  1. A travers l’attribut data-pace-options
    <script data-pace-options="{
       ajax: true,
       element: false
    }" src="dossier/vers/pace.min.js">
    <script>
  2. Ou à travers la variable window.paceOptions
    <script>
       window.paceOptions = {
           ajax: true,
           element: false
       }
    </script>

Je vous laisse découvrir tout dans la documentation