Das JQuery-Plug-In NProgress.js erstellt den Fortschritt beim Laden einer Webseite bar_jquery

NProgress.js ist ein extrem dünner Fortschrittsbalken im Nanomaßstab, der realistische dünne Linienanimationen verwendet, damit Benutzer sehen können, was auf der Webseite passiert!

Vielleicht haben Sie auf YouTube den roten Laserimpuls gesehen, der beim Seitenwechsel erscheint. Tatsächlich haben die Fortschrittsbalken vieler mobiler Browser diesen Stil, er wird jedoch selten auf Webseiten implementiert. Mit dem NProgress jQuery-Plug-in können Sie dies jedoch ganz einfach erreichen!

NProgress.js wird auf den schlanken Fortschrittsbalken komplexer Webseiten angewendet. Inspiriert von Google, YouTube und Medium.

Installieren

Abhängig von jQuery (Version 1.8 und höher), fügen Sie nprogress.js und nprogress.css zu Ihrem Projekt hinzu.

Anwendung

NProgress.start() – Fortschrittsbalken anzeigen

NProgress.set(0.4) – Prozentsatz festlegen

NProgress.inc() – fügen Sie ein wenig

NProgress.done() – Fortschrittsbalken für den Abschluss

Sie können auch...
Fügen Sie es dort hinzu, wo Sie Ajax anrufen! Binden Sie es an die jQuery-Ereignisse ajaxStart und ajaxStop
Erstellen Sie einen wunderbaren Fortschrittsbalken ohne Turbolinks/Pjax! Binden Sie es an $(document).ready und $(window).load

Konfigurations-Plugin

Ändern Sie den Mindestprozentsatz durch Minimum.

NProgress.configure({ Minimum: 0.1 });

Sie können die Markup-Struktur über eine Vorlage ändern. Damit der Fortschrittsbalken ordnungsgemäß funktioniert, ist ein Element erforderlich, das das Attribut „role='bar'“ enthält.

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

Animationseinstellungen und Geschwindigkeit (Millisekunden) über Ease (ein Beschleunigungswert in CSS) anpassen.

NProgress.configure({ease: 'ease', speed: 500 });

Möchten Sie den Fortschrittsbalkenschritt deaktivieren? Setzen Sie „trickle“ auf „false“.

NProgress.configure({ trickle: false });

Sie können trickleRate (um wie viel sich jeder Schritt erhöht) und trickleSpeed ​​​​(Schrittintervall, in Millisekunden ms) anpassen.

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

Möchten Sie den Fortschrittsring deaktivieren? Setzen Sie showSpinner auf false.

NProgress.configure({ showSpinner: false });

Online-Demo http://ricostacruz.com/nprogress/

Quellcode-Download https://github.com/rstacruz/nprogress