GOOCODE - Find your code/scripts

0 NProgress.js provides a page loading progress bar effect. When the page opens and loads, a progress bar loading animation will appear at the top of the page. NProgress.js is a lightweight progress bar component that is easy to use and can be easily integrated into single-page applications.


installation
Install with npm

$ npm install --save nprogress

Or directly quote the nprogress.js and nprogress.css files to your page.

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

usage
Just call start() and done() to control the progress bar

NProgress.start(); // Start loading
NProgress.done(); // Loading completed

NProgress also provides several other methods, such as setting a percentage, calling .set(n) to control the progress, where n ranges from 0-1. Call .inc() to generate a random increment. By passing the true parameter to done(), the progress bar is full and forced to complete.

NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()

NProgress.inc(); // increment
NProgress.done(true); // Forced completion

In actual use, we generally call NProgress when Ajax or Pjax is loaded. You can use NProgress in Ajax provided by jQuery, or using Pjax, or in other frameworks such as Vue.js.

Here we demonstrate using the Ajax method to request remote data, and then call the progress bar loading process.

$('#loading').on('click', function(event) {
    event.preventDefault();
    NProgress.start();
    $.get('data.php', function(data) {
        $('#msg').html(data);
        NProgress.done();
    });
});

In the above code, when the button #loading is clicked, NProgress.start() will be called to start the progress bar loading animation and send $.get to request remote data. After returning the data, NProgress.done() ends the loading animation. Note that the code uses the jQuery library, so you should first load the latest jQuery library files.

Here, in order to make the effect more realistic, I specifically set the code in data.php to delay 2miao before responding to the returned data. Of course, the actual development is the actual back-end code execution.

<?php
// data.php
sleep(2);
echo'Return data: ok';

Parameter configuration
minimum
The lowest percentage at the beginning of the setting, the default is 0.08.
NProgress.configure({ minimum: 0.1 });

template
Change the HTML structure of the progress bar. In order to ensure that the progress bar works properly, you need an element with the role='bar' attribute.
NProgress.configure({
template: ""
});

ease and speed
ease can pass CSS3 buffered animation strings (such as ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier). speed is the animation speed (default 200, unit ms).
NProgress.configure({ easing:'ease', speed: 500 });

trickle
Whether to display the progress bar, default: true
NProgress.configure({ trickle: false });

trickleSpeed
Set the step speed of each progress bar (ms).
NProgress.configure({ trickleSpeed: 200 });

showSpinner
Whether to display circular progress animation, the default is true.
NProgress.configure({ showSpinner: false });

parent
Specify the changed parent container, the default body.
NProgress.configure({ parent:'#container' });

Of course, you can also modify nprogress.css to achieve the appearance of the progress bar you want, such as changing the background color and height of the progress bar.