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

Si vous avez aimé ce post, acclamez-moi juste en dessous

Voir aussi  Verifier les données fomulaires HTML5 sans Javascript

3 comments

  • Localiser IP
    Localiser IP

    C’est la configuration qu’il me faut.

    • Rolly
      Rolly

      Nouvelle configuration

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.