Simple usage of jQuery NProgress. js loading progress plug-in, jquerynprogress. js

Simple usage of jQuery NProgress. js loading progress plug-in, jquerynprogress. js

NProgress. js

Note:

NProgress is based on jquery and must be later than 1.8

:

Https://github.com/rstacruz/nprogress

API:

NProgress. start ()-progress bar NProgress. set (0.4)-set the progress to the specific percentage position NProgress. inc ()-a small increase in progress NProgress. done ()-mark the progress bar as completed

Procedure:

1. Introduction

<Link rel = "stylesheet" type = "text/css" href = "css/NProgress.css" rel = "external nofollow"> <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:

<em id="__mceDel"><script>$(function() { 　　NProgress.start(); 　　$(window).load(function() {   　　NProgress.done(); });</script></em>

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 Summary This method hangs on the window to listen to all ajax requests in the project // ajax events can be referred to the jquery documentation http://jquery.cuishifeng.cn/

Summary

The above section describes jQuery NProgress. js loading progress plug-in is easy to use. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!