企业网站建设国内外差异
nprogress⽂档（中英双语）
翻译不准，只求个⽅便
Minimalist progress bar （极简进度条）
Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.
（ Ajax应⽤程序的细长进度条。受⾕歌、YouTube和Medium的启发。）
Installation （安装）
Add  and  to your project.（将  和  引⼊你的项⽬）
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
NProgress is available via  and . （ NProgress可通过  和  获取.）
$ npm install --save nprogress
Also available via  CDN: （也可以通过  CDN 使⽤）
Basic usage （基本⽤法）
Simply call start() and done() to control the progress bar. （简单的调⽤ start() 和 done() 控制进度条）
NProgress.start();
NProgress.done();
（原⽂档中的Turbolinks被Turbo取代⽽Turbo⽬前处于测试阶段。下⾯简单搬运⼀下这东西的原理）Pjax(没⽤过，继续搬运⼀下)
Try this: (explained )
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',  function() { NProgress.done();  });
Ideas（想法）
Add progress to your Ajax calls! Bind it to the jQuery ajaxStart and ajaxStop events.（在你的Ajax调⽤中加⼊进度条！将它绑定到jQuery ajaxStart 和 ajaxStop 事件)触发器 select into
Make a fancy loading bar even without Turbolinks/Pjax! Bind it to $(document).ready and $(window).load.（创建⼀个函数加载条事件，即使没有Turbolinks/Pjax!！将它绑定到 $(document).ready 和 $(window).load）
Advanced usage（⾼级⽤法）
Percentages: To set a progress percentage, call .set(n), where n is a number between 0..1.（百分率：设置⼀个百分率进度条，调⽤ .set(n)，这⾥ n 是⼀个在0到1之间的数字）
NProgress.set(0.0);    // Sorta same as .start()（可以说和 .start()是⼀样的）
NProgress.set(0.4);
NProgress.set(1.0);    // Sorta same as .done()（可以说和 .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).(增量：增量进度条，仅仅使⽤ .inc()。这个增量它是个随机数。这个将永远不会到100%：⽤它对每个图⽚加载（或同类的加载）)
NProgress.inc();
If you want to increment by a specific value, you can pass that as a parameter:（如果你想按照特定值递增，你可以将它作为⼀个参数传递）
jquery下载文件请求NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994（这个将获取现在的状态值并添加0.2直到状态是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)（增强-完成：传true进 done()，它将显⽰进度条，即使进度条没有什么显⽰。（默认⾏为是这样的，如果 .start() 没有被调⽤ .done() 将不做任何事））
NProgress.done(true);
Get the status value: To get the status value, use .status（获取状态值：获取状态值，使⽤ .status）
Configuration(配置层)
minimum（最⼩值）
Changes the minimum percentage used upon starting. (default: 0.08)（改变在开始时的最⼩百分率（默认：0.08））figure({ 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  for reference.（你可以改变标记使⽤模板。保持进度条⼯作，保持这⾥的元素是 role='bar'。看默认模板做为参考）
template: "<div class='....'>...</div>"
});
easing and speed（减缓和速率）
Adjust animation settings using easing (a CSS easing string) and speed (in ms). (default: ease and 200)（调整动画设置使⽤减缓（⼀个CSS减缓字符串）和速率（在毫秒级）（默认：ease 和 200））
trickle（细流）
Turn off the automatic incrementing behavior by setting this to false. (default: true)（通过将这个设置为 false 关闭⾃动递增⾏为（默认：true））
trickleSpeed（细流速率）
Adjust how often to trickle/increment, in ms.（调整trick/increment，在毫秒级）
showSpinner（显⽰为转轮）
ascii编码是最流行的编码方式
sql exists用法详解Turn off loading spinner by setting it to false. (default: true)（通过关闭加载装论设置它为false（默认：true））
parent（⽗级）
specify this to change the parent container. (default: body)（指定这个改变⽗级容器（默认：body））
Customization（定制）
Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of
#29d.（只需编
辑 nprogress.css 为你喜好的。⼩技巧：你⼤概只是想查换掉#29d的出现）
The included CSS file is in fact, feel free to scrap it and make your own!(包含CSS⽂件时⾮常⼩的...事实上，你可以把它扔掉，⾃⼰做⼀个)
Resources（资源）
(usabilitypost)（新的UI模式：⽹站加载条）
安装
NPM
npm install --save nprogress
Yarn
yarn add nprogress
直接引⼊js、css或者通过cdn引⼊。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
使⽤
直接调⽤ start()或者done()来控制进度条。
NProgress.start();
NProgress.done();
可以通过调⽤ .set(n)来设置进度，n是0-1的数字。
NProgress.set(0.0);    // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);    // Sorta same as .done()
可以使⽤inc()随机增长进度条，注意，这个⽅法永远不会让进度条达到100%。NProgress.inc();
通过使⽤done()让进度条关闭。
NProgress.done(true);
java target属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。