Maison > Article > interface Web > 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