When route switching, the top page displays the progress bar, can be used with multi-terminal

Look at a map

If our program every time the page is switched, there is a progress bar at the top, it will enhance the user experience greatly.

npropgress plug

github address

Simple usage - Vue project as an example (detailed configuration, click on the above address github view the document)

The easiest way to use: vue project each time routing switches are loading progress bar

installation

npm install --save nprogress

Introduced

Introduced in the routing configuration file, writes two hook function after loading and before routing Loading

// 引入
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 进度条配置项这样写
NProgress.configure({
  showSpinner: false
});

// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach((to, from, next) => {
	NProgress.start();
});

// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
	NProgress.done();
});

If it is introduced, then cdn, as follows

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

Set the color of the progress bar

If a general vue project, put into a style css file, in the Item Master main.jsintroduced, the following is a css styles

#nprogress .bar {
  background: #00CC00 !important; //自定义颜色
}

Configuration Item

Manual control progress bar increments the parameter ranges 0 - 1, do not pass argument, each call will randomly increase, but will never reach 100%, unless the call NProgress.done();

// 调用之前如果进度条的状态 50%
NProgress.inc(0.2);
// 调用之后 70%

Progress bar loaded

Parameters true: even without the call NProgress.start()will also be displayed and execution progress bar from 0% - 100% of the state, and then disappear.
Without parameters: If you do not call NProgress.start(), then this command does nothing.

NProgress.done(true);

Minimum percentage (default is 0.08) when the progress bar

NProgress.configure({
  minimum: 0.3
});

You can change the mark using a template. To maintain the progress of work, in which you want to retain a role = 'bar' elements, refer to the default template.

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

// 举例
NProgress.configure({
  template: "<div class='other-instance'><div role='bar'>更改标记</div></div>"
})

And easing the use of animation speed adjustment settings, ease animated character string may be transmitted CSS3 buffer (e.g., ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier), speed of animation speed (in ms). The default respectivelyease 200

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

Turn off auto-increment behavior

NProgress.configure({
  trickle: false
});

Increasing frequency adjustment milliseconds

NProgress.configure({
  trickleSpeed: 200
});

Off-spinner, the default is ON state (that circle the figure above the upper right corner loading icon)

NProgress.configure({
  showSpinner: false,
});

Change the parent container

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