nprogress README

The project's README from github.com/rstacruz/nprogress. As one markdown file: README.md.

NProgress

Status npm version jsDelivr Hits

Minimalist progress bar

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

Installation

Add nprogress.js and nprogress.css to your project.

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

NProgress is available via bower and npm.

$ npm install --save nprogress

Also available via unpkg CDN:

Basic usage

Simply call start() and done() to control the progress bar.

NProgress.start();
NProgress.done();

Ensure you're using Turbolinks 5+, and use this: (explained here)

$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
});

Ensure you're using Turbolinks 1.3.0+, and use this: (explained here)

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

Pjax

Try this: (explained here)

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

Ideas

Advanced usage

Percentages: To set a progress percentage, call .set(n), where n is a number between 0..1.

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

Incrementing: To increment the progress bar, just use .inc(). This increments it with a random amount. This will never get to 100%: use it for every image load (or similar).

NProgress.inc();

If you want to increment by a specific value, you can pass that as a parameter:

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

Force-done: By passing true to done(), it will show the progress bar even if it's not being shown. (The default behavior is that .done() will not do anything if .start() isn't called)

NProgress.done(true);

Get the status value: To get the status value, use .status

Configuration

minimum

Changes the minimum percentage used upon starting. (default: 0.08)

NProgress.configure({ minimum: 0.1 });

template

You can change the markup using template. To keep the progress bar working, keep an element with role='bar' in there. See the default template for reference.

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

easing and speed

Adjust animation settings using easing (a CSS easing string) and speed (in ms). (default: ease and 200)

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

trickle

Turn off the automatic incrementing behavior by setting this to false. (default: true)

NProgress.configure({ trickle: false });

trickleSpeed

Adjust how often to trickle/increment, in ms.

NProgress.configure({ trickleSpeed: 200 });

showSpinner

Turn off loading spinner by setting it to false. (default: true)

NProgress.configure({ showSpinner: false });

parent

specify this to change the parent container. (default: body)

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

Customization

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

The included CSS file is pretty minimal... in fact, feel free to scrap it and make your own!

Resources

Support

Bugs and requests: submit them through the project's issues tracker.
Issues

Questions: ask them at StackOverflow with the tag nprogress.
StackOverflow

Chat: join us at gitter.im.
Chat

Thanks

NProgress © 2013-2017, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors.

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

 

nprogress (rstacruz/nprogress)

Searching Database…

26.3K ·GitHub
Nprogress
这是什么?NProgress 是一个极简的 JavaScript 库,会在页面顶部显示一条细长的进度条,类似 YouTube 或 Medium 上的效果,用于在 Ajax 请求或页面切换期间提示正在加载。
它是框架,还是只是一个小型库?它是一个很小的独立库,由一个 JS 文件和一个 CSS 文件组成,直接放进你的项目即可使用,并不是框架。
怎样把它添加到项目里?可以通过 npm 安装(npm install --save nprogress)或使用 bower 安装,也可以直接引入 nprogress.js 和 nprogress.css,或从 unpkg CDN 加载。
还需要其他东西才能让它工作吗,比如 Turbolinks 或 jQuery?不需要。只要调用 start() 和 done() 就能独立运行。如果你使用 Turbolinks 或 Pjax,它也内置了相应的辅助功能;你也可以自己把它绑定到 jQuery 的 ajaxStart/ajaxStop 事件上。
进度条反映的是真实的加载百分比吗,还是假的?默认情况下,它只是自动递增(trickle),逐步逼近完成,并不是跟踪真实进度;不过你可以手动调用 .set(n) 或 .inc() 进行更精确的控制,trickle 也可以关闭。
谁会用到它?主要是前端开发者,他们在开发网站或单页应用时,希望在页面跳转或 Ajax 调用期间有一个快速的可视化加载提示。
我可以自定义进度条的外观吗?可以。你可以通过 template 选项修改标记结构,也可以编辑 nprogress.css 来重新设计样式;只需替换 #29d 这个十六进制颜色代码,就能轻松更改默认颜色。
我可以控制动画速度和缓动效果吗?可以。easing(CSS 缓动字符串)和 speed(单位为毫秒)选项用于控制进度条的动画,默认值分别为 ease 和 200ms。
加载旋转图标是必需的吗?不是。进度条旁边显示的旋转图标可以通过 showSpinner 选项关闭,该选项默认为 true。
我能获取当前的进度值吗?可以,当前状态值通过 .status 属性提供。
What are similar projects?SpinKit, jquery-ui, DSH-Transparent-UI-Plugin, drawably, material-components-web, primeng, bootstrap-table, sweetalert
Which topics is it in?loading, ui-components, animation, customization, css, browser, ui, npm, frontend, library, javascript, web
Creator
rstacruz
Size
0.7 MB
Stars
26.3K
Updated
CommitApr 19Releasev0.2.0Apr 19
Age
13y
Commits · 90 Days