Google Like Slim Progress Bar Plugin - NProgress

版本:

浏览量:1121

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

NProgress 是一个微型 JavaScript 插件，用于创建一个细长的纳米级进度条，它具有逼真的涓流动画，让您的用户相信正在发生的事情。

非常适合 Turbolinks、Pjax 和其他 Ajax 密集型应用程序。受 Google、YouTube 和 Medium 的启发。

如何使用它：

1. 在网页上包含 NProgress 插件的 JavaScript。jQuery 是可选的。

<script src="jquery.min.js"></script>
<script src="nprogress.js"></script>

2. 包含所需的 NProgress 样式表来设置进度条的样式

<link href="nprogress.css" rel="stylesheet" />

3. 启动/结束进度条的javascript。

// start the progress bar
NProgress.start();
 
// end the progress bar
NProgress.done();
 
// show the progress bar even if it's not being shown
NProgress.done(true);

4. 将进度条设置为特定的进度百分比。

// 0%
NProgress.set(0.0);
 
// 50%
NProgress.set(0.5);
 
// 100%
NProgress.set(1.0);

5. 增加进度条。

// +20% until 99.4%
NProgress.inc(0.2);

6. 使用以下选项配置进度条。

NProgress.configure({
 
  // minimum progress percentage
  minimum: 0.08,
 
  // easing function
  easing: 'linear',
  positionUsing: '',
 
  // animation speed
  speed: 200,
 
  // turn on/off the automatic incrementing behavior
  trickle: true,
  trickleSpeed: 200,
 
  // show loading spinner
  showSpinner: true,
 
  // progress bar selector
  barSelector: '[role="bar"]',
 
  // spinner selector
  spinnerSelector: '[role="spinner"]',
 
  // append the progress bar to this element
  parent: 'body',
 
  // custom template
  template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
   
});