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  Emmet : Coder plus rapidement en HTML & CSS avec Emmet

3 comments

  • Localiser IP
    Localiser IP

    C’est la configuration qu’il me faut.

    • Rolly
      Rolly

      Nouvelle configuration

Répondre

Votre email ne sera pas publié Required fields are marked *

Vous pouvez utiliser les balises HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

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