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  L'endroit idéal pour Apprendre HTML et CSS en RDC

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. Apprenez comment les données de vos commentaires sont utilisées.