vue progress bar plugin nprogress

vue progress bar plugin

Using Nprogress in Vue 2.0 is achieved by installing the Nprogress library. Here are some basic steps:

Use npm or yarn to install the Nprogress library:

npm install --save nprogress

yarn add nprogress

Import Nprogress in the Vue component:

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

Use Nprogress in Vue components to display progress bars. This can be done in Vue's lifecycle hook function, such as mounted:

mounted() {
    
    
  Nprogress.start();  // 开始进度条
  
  // 在异步操作结束后，停止进度条
  Nprogress.done();
}

In addition to hook functions, you can also call and mountedin other appropriate places to control the display and hiding of the progress bar.Nprogress.startNprogress.done

Note: The above code is just a simple usage example, the actual scenario may be different. Please make appropriate adjustments and extensions based on your specific needs.

Instructions

NProgress.start() — displays a progress bar

NProgress.set(0.4) —Set percentage

NProgress.inc() — add a little bit

NProgress.done() — Complete progress bar

NProgress also provides several other methods, such as setting percentage and calling .set(n)to control progress, where n ranges from 0-1. The call .inc()generates a random increment that will never reach 100%: use it for every image load (or similar). By passing the true parameter to done(), the progress bar is full and forced to complete.

NProgress.set(0.0);     // NProgress.start()
NProgress.set(0.4);     // 要设置进度百分比
NProgress.set(1.0);     // NProgress.done()

NProgress.inc();        // 递增-递增进度条 如果要增加特定值，可以将其作为参数传递
NProgress.inc(0.2);     // 这将获取当前状态值并添加0.2直到状态为0.994   
// 传递true到done()，即使未显示进度条也将显示进度条。（默认 如果.start()不调用，.done()*不会做任何事情） 
NProgress.done(true);   // 强制完成
// 获取状态值 要获取状态值，请使用.status
NProgress.status

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

Here we demonstrate the process of using the Ajax method to request remote data and then calling the progress bar to load.

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

Configure plugin

minimum-minimum value

Modify the minimum percentage via minimum. Set the minimum percentage to start with, default is 0.08.

NProgress.configure({
    
     minimum: 0.1 });

template-template

You can templatemodify the markup structure via . In order for the progress bar to work properly, an role='bar'element containing the attribute is required.

NProgress.configure({
    
    
	template: "..."
});
NProgress.configure({
    
    
  template: "<div class='....'>...</div>"
});

ease and speed-CSS animation properties

Ease can pass CSS3 buffer animation strings (such as ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier).

Speed is the animation speed (default 200, unit ms).

Adjust animation settings using easing (CSS easing string) and speed (in milliseconds). (default: easeand 200)

Adjust animation settings and speed (in milliseconds) via ease(an easing value in CSS) .speed

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

trickle-auto-increment

Turn off the auto-increment behavior by setting this to false, whether to display a progress bar, default: true

Want to turn off the progress bar step? Set trickleto false.

NProgress.configure({
    
     trickle: false });

The progress bar increases the amplitude and frequency trickleSpeed trickleRate

Set each progress bar step speed (ms). The units are percentage and milliseconds respectively.

You can adjust trickleRate(how much each step increases) and trickleSpeed(step interval in milliseconds ms).

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

showSpinner

Whether to display circular progress animation, default true.

Want to disable the progress loop? Set showSpinnerto false.

NProgress.configure({
    
     showSpinner: false });

parent - parent container

Specify the changed parent container, default body.

NProgress.configure({
    
     parent: '#container' });

Customization

Of course, you can also modify it nprogress.cssto achieve the appearance of the progress bar you want, such as changing the progress bar background color, height, etc.

NProgress.configureIt is a method in the Nprogress library, used to configure global Nprogress options. Through this method, you can set the behavior and style of Nprogress.

Here is an example showing how to NProgress.configureconfigure an Nprogress instance using:

import Nprogress from 'nprogress';

Nprogress.configure({
    
    
  minimum: 0.1,        // 进度条的最小值
  easing: 'ease',      // 进度条的动画效果
  speed: 500,          // 动画过渡的速度（毫秒）
  trickle: true,       // 是否自动逐渐增加进度条
  trickleSpeed: 200,   // 增加进度条时的速度（毫秒）
  showSpinner: false,  // 是否显示加载图标
  parent: 'body',      // 进度条的父元素
  barSelector: '.my-progress-bar',  // 自定义进度条选择器
  spinnerSelector: '.my-spinner',    // 自定义加载图标选择器
  template: '<div class="my-progress-bar"></div>'  // 自定义进度条模板
});

Through NProgress.configuremethods, you can customize the style and behavior of Nprogress according to your needs. The above examples only show some common configuration options. You can learn more about other available configuration options according to the documentation.