jquery plugin nprogress.js make Web page load progress bar

This article mainly introduces the jquery plug-in nprogress.js production page loading progress bar related data, need friends can refer to the following

Nprogress.js is a very fine nano-scale progress bar, with the reality of the thin line of animation to allow users to see what is happening on the page!

You may have seen the Red laser pulse on Youtube and it will appear when you switch pages. In fact, many mobile browser's progress bar is this style, but the implementation on the Web page is rare. However, with nprogress this jQuery plugin, you can also easily achieve!

Nprogress.js a slender progress bar applied to complex web pages. Inspired by Google, YouTube, and Medium.

Installation

Depending on jQuery (version 1.8 and above), add nprogress.js and Nprogress.css to your project.

How to use

Nprogress.start ()-Show progress bar

Nprogress.set (0.4)-set percent

Nprogress.inc ()-Add a little

Nprogress.done ()-Complete the progress bar

You can also ...

Add to the place where you call Ajax! Bind it to the JQuery Ajaxstart and Ajaxstop events

No turbolinks/pjax can make a wonderful progress bar! Bind it to $ (document). Ready and $ (window). Load

Configuring Plug-ins

Use minimum to modify the minimum percentage.

Nprogress.configure ({minimum:0.1});

You can modify the tag structure by template. To ensure the progress bar works, you need an element that contains the role= ' bar ' attribute.

Nprogress.configure ({Template: "..."});

Adjust animation settings and speed speed (ms) by ease (the easing value in a CSS).

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

Want to turn off progress bar stepping? set Trickle to false.

Nprogress.configure ({trickle:false});

You can adjust the tricklerate (how much each step grows) and tricklespeed (step interval, unit ms).

Nprogress.configure ({tricklerate:0.02, tricklespeed:800});

Want to disable the progress loop? set Showspinner to False.

Nprogress.configure ({showspinner:false});