nprogress官网教程小记

官网文档大概翻译了下,部分内容按照小编的语言习惯做了调整。

安装

npm i nprogress

主页

github.com/rstacruz/nprogress

资料库

github.com/rstacruz/nprogress

NProgress

适用于Ajax 类型应用程序的超薄进度条。灵感来自Google,YouTube和Medium。

安装

nprogress.jsnprogress.css添加到您的项目。

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

NProgress可通过bower以及npmspm获得

$ bower install --save nprogress
$ npm install --save nprogress

基本用法

只需调用start()done()以控制进度栏。

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

使用Turbolinks或类似的东西?确保您使用的是Turbolinks 1.3.0+,并使用以下命令:(在此处说明 )

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

提示

  • 为您的Ajax通话增加进度!将其绑定到jQuery ajaxStartajaxStop事件。
  • 即使没有Turbolinks / Pjax,也可以制作精美的加载条!将其绑定到 $(document).ready$(window).load

高级用法

百分比:要设置进度百分比,请致电.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();

如果要增加特定值,可以将其作为参数传递:

NProgress.inc(0.2);     //  这将获取当前状态值并添加0.2直到状态为0.994    

强制完成:传递truedone(),即使未显示进度条也将显示进度条。(默认 如果.start()不调用,.done()不会做任何事情)

NProgress.done(true);

获取状态值:要获取状态值,请使用.status

配置

最小值minimum

配置最小的百分比。(默认值:0.08

NProgress.configure({ minimum: 0.1 });

模板template

您可以使用更改标记template。要使进度条保持工作状态,请role='bar'在其中保留一个元素。请参阅默认模板 以供参考。

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

CSS动画属性 easingspeed

使用缓动(CSS缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认:ease200

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

自动递增 trickle

通过将此设置为来关闭自动递增行为false。(默认值:true

NProgress.configure({ trickle: false });

进度条增加幅度和频率 trickleRate trickleSpeed

单位分别是 百分比、毫秒

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

showSpinner

额,这是个啥?没明白。

NProgress.configure({ showSpinner: false });

父级容器parent

指定父容器。(默认值:body

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

定制化

只需nprogress.css根据自己的喜好进行编辑。提示:您可能只想查找和替换出现的#29d

随附的CSS文件非常小...实际上,请随意对其进行剪贴,并自行制作!

版权声明

翼安博客


首发 翼安博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
计算机基础算法篇(二)—— 对称加密算法
##对称加密算法   在对称加密算法中,数据发信方将明文(原始数据)和加密密钥一起经过特殊加密算法处理后,使其变成复杂的加密密文发送出去。收信方收到密文后,若想解读原文,则需要使用加密用过的密钥及相同算法的逆算法对密文进行解密,才能使其恢复成可读明文。在对称加密算法中,使用的密钥只有一个,发收信双方都使用这个密钥对数据进行加密和解密,这就要求解密方事先必须知道加密密钥。 ##常
26

网络安全基础篇(一)—— 常见名词解释1
##信息安全领域,渗透测试,漏扫,加固,逆向分别指什么 **渗透测试(Penetration Testing)**:渗透测试是一种针对计算机系统、网络或应用程序的安全评估方法。通过模拟攻击者的行为,渗透测试专家试图利用系统的漏洞或弱点来获取未经授权的访问权限,以评估系统的安全性,并提供改进建议。 **漏洞扫描(Vulnerability Scanning)**:漏洞扫描是通过自动化工具检测计算机
21

商务那些事(一)
##公共采购方式   公共采购一般包含以下几种方式: **公开招标**:这是最常用的一种采购方式,通过发布公告,邀请所有潜在的供应商参加竞争。招标人从应答人中择优选择中标(成交)供应商。这种方式的优势在于具有公开性和竞争性,可以降低采购成本,提高采购效率。 **邀请招标**:也称为有限竞争,这种方式不是对所有供应商开放,而是邀请少数特定的供应商参加竞争。这种方式的优点是节约
34

知识点学习Day5
1、公共采购方式(1) 公开招标:公开招标是最常见的招标方式,采购方在公共平台发布招标信息,符合条件的供应商都可以参与投标。公开招标的优点是投标人较多、竞争充分、不容易出现串标、围标等情况。 (2) 邀请招标:邀请招标是指采购人依法从符合相应资格条件的供应商中随机邀请3家以上供应商,并以投标邀请书的方式邀请其参加投标。这种方式是非公开性质的,通常适用于国家重点项目或国有资金占控
42

知识点学习Day4
C语言实现冒泡排序 1、升序排序: void asc(int *a,intn){    int i=0,j=0;    for( i=0;i<n-1;i++){        for(j=0;j<n-1;j++){     
41

计算机基础算法篇(一)—— 冒泡排序
##原理    对数组进行遍历,每次对相邻两个进行比较大小,若大的数值在前面则交换位置(升序),完成一趟遍历后数组中最大的数值到了数组的末尾位置,再对前面n-1个数值进行相同的遍历,一共完成n-1次遍历就实现了排序完成,时间复杂度是O(n^2),空间复杂度O(1)。 ##代码实现 ###C语言 ```C #include void bubble_sort(int arr[],
55

知识点学习Day3
1. 使用 C语言开发的软件,一般情况下要如何测试?C语言开发完成的软件,主要执行一下步骤完成测试:(1)需求分析:首先明确软件的需求和功能,确保测试团队对软件的功能和目标有清晰的理解。(2)制定测试计划:根据需求分析,制定详细的测试计划,包括测试的目标、范围、资源、时间表等。(3)创建测试环境:准备测试所需的硬件、软件和网络环境,确保测试环境与实际运行环境相似。(4)编写测试用例:根据
40

计算机基础软件测试篇(一)—— C语言开发软件
##什么是系统测试,C 语言的系统测试有哪些方法?    系统测试是软件开发过程中的一种测试方法,旨在验证整个软件系统的功能、性能和稳定性,以确保软件在实际环境中正常工作。    在C语言中,系统测试的方法可以有以下几种: 单元测试(Unit Testing):对程序中的每个函数或模块进行测试,确保其独立的功能正确实现。可以使用测试框架如Google T
41

计算机基础运维篇(一)—— Apache与Nginx
##Nginx 轻量级,采用 C 进行编写,同样的 web 服务,会占用更少的内存及资源; 抗并发,nginx 以 epoll and kqueue 作为开发模型,处理请求是异步非阻塞的,负载能力比;apache 高很多,而 apache 则是阻塞型的。在高并发下 nginx 能保持低资源低消耗高性能 ,而 apache 在 PHP 处理慢或者前端压力很大的情况下,很容易出现进程数飙升,从而拒绝服
39

知识点学习Day2
1、简述面向对象编程和面向过程编程,区别面向对象(OOP):以对象为核心的编程方式,程序的主体是对象,对象具有属性和方法的实体,通过对象之间进行操作完成交互,通过定义类,可以创建多个对象实例,它的基本特征有三:封装性、继承性和多态性。封装是指将对象的属性和方法封装在类中,外部不能直接访问,内部访问时,调用其方法类方法就可以,继承是可以从已有的类派生出新的类,并且可以获取父类的属性和方法,多态是指统
42

计算机基础前端篇(一)—— 常见的前端框架
## vue ### 特点   Vue 是一个以数据驱动视图的轻量级渐进式 MVVM 框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,所以其核心是一个响应的数据绑定系统。   **注**:*数据驱动视图: 常规的 js 都是操作 dom 来开发程序,代表者 jquery ,而Vue 不用直接操作 dom,是用数据来控制元素的变化。
45

作业1(0103)
一、列举你熟悉的三个前端框架,简述优缺点和特点。 答: Vue : Vue 是尤雨溪编写的一个构建数据驱动的 Web 界面的库,准确来说不是一个框架,它聚焦在 V ( view )视图层。
40