Simple and practical method of NProgress. js loading progress plug-in,

Simple and practical method of NProgress. js loading progress plug-in,

NProgress. js

　　Note:

NProgress is based on jquery and the version must be> 1.8

:

Https://github.com/rstacruz/nprogress

　　API:

NProgress. start ()-progress bar

 

NProgress. set (0.4)-set the progress to a specific percentage position

 

NProgress. inc ()-a small increase in progress

 

NProgress. done ()-mark the progress bar as completed

　　Procedure:

1. Introduction

1 <link rel = "stylesheet" type = "text/css" href = "css/NProgress.css"> 2 <script src = "js/NProgress. js "type =" text/javascript "> </script> <br> // jquery is introduced before.

2. Use Case 1: page loading effect start page loading start progress bar page loading end progress bar:

<script>$(function() {  　　NProgress.start();  　　$(window).load(function() {      　　NProgress.done();  });</script>

3. Use Case 2: ajax transmission effect start send start progress bar end after the progress bar is successfully sent:

<Script> $ (window ). ajaxStart (function () {NProgress. start () ;}); $ (window ). ajaxStop (function () {NProgress. done () ;}); </script>
// Tip: This method is mounted on the window to listen to all the ajax requests in the project.
// Ajax events can refer to the jquery document http://jquery.cuishifeng.cn/