Le plug-in jquery NProgress.js crée la progression du chargement de la page Web bar_jquery

NProgress.js est une barre de progression extrêmement fine à l'échelle nanométrique qui utilise une animation réaliste en lignes fines pour permettre aux utilisateurs de voir ce qui se passe sur la page Web !

Vous avez peut-être vu cette impulsion laser rouge sur Youtube qui apparaît lorsque vous changez de page. En fait, les barres de progression de nombreux navigateurs mobiles ont ce style, mais il est rare de l'implémenter sur des pages Web. Cependant, avec le plug-in NProgress jQuery, vous pouvez facilement y parvenir !

NProgress.js est appliqué à la fine barre de progression des pages Web complexes. Inspiré de Google, YouTube et Medium.

Installer

Dépend de jQuery (version 1.8 et supérieure), ajoutez nprogress.js et nprogress.css à votre projet.

Comment utiliser

NProgress.start() — Afficher la barre de progression

NProgress.set(0.4) —Définir le pourcentage

NProgress.inc() — ajoutez un petit peu

NProgress.done() — barre de progression d'achèvement

Vous pouvez aussi...
Ajoutez-le là où vous appelez Ajax ! Liez-le aux événements jQuery ajaxStart et ajaxStop
Créez une merveilleuse barre de progression sans Turbolinks/Pjax ! Liez-le à $(document).ready et $(window).load

Plugin de configuration

Modifiez le pourcentage minimum en passant par minimum.

NProgress.configure({ minimum : 0.1 });

Vous pouvez modifier la structure du balisage via un modèle. Pour que la barre de progression fonctionne correctement, un élément contenant l'attribut role='bar' est requis.

NProgress.configure({ template: "..." });

Ajustez les paramètres et la vitesse de l'animation (millisecondes) via la facilité (une valeur d'accélération en CSS).

NProgress.configure({ facilité : 'facilité', vitesse : 500 });

Vous souhaitez désactiver l'étape de la barre de progression ? Réglez le filet sur false.

NProgress.configure({ trickle: false });

Vous pouvez ajuster trickleRate (de combien chaque étape augmente) et trickleSpeed ​​​​(intervalle d'étape, en millisecondes ms).

NProgress.configure({ trickleRate : 0,02, trickleSpeed : 800 });

Vous souhaitez désactiver l'anneau de progression ? Définissez showSpinner sur false.

NProgress.configure({ showSpinner: false });

Démo en ligne http://ricostacruz.com/nprogress/

Téléchargement du code source https://github.com/rstacruz/nprogress