Pace.js Ajouter une barre de progression de chargement dans votre site

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

     
  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

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
  2. Ou à travers la variable window.paceOptions

Je vous laisse découvrir tout dans la documentation

Voir aussi  Solutions possibles pour créer un site web

Ajouter un commentaire

Un commentaire

  1. Localiser IP 11 janvier 2018
Plus dans HTML & CSS, Javascript
detecte close of browser
Comment détecter la fermeture du navigateur en JavaScript

Ils vous arrivent aussi d’être dans une page où vous étiez par exemple entraine d’éditer ou d’écrire quelque chose et...

phpstorm
PHPStorm un environnement de développement intégré WEB pour le pro

Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec...

Fermer