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文件非常小...实际上,请随意对其进行剪贴,并自行制作!

版权声明

FindFor


首发 FindFor,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
libnfc安装配置(Linux)
## 1、安装依赖库 ```shell sudo apt-get install libusb-dev libpcsclite-dev libusb libpcsclite1 libccid pcscd ``` ## 2、下载libnfc 选择一个libnfc存放路径,执行git命令下载libnfc ```shell git clone https://github.com/nfc-tools/l
138

dirsearch简单使用
` dirsearch`是一个用于在Web服务器上枚举目录和文件的工具,支持多线程,具有一些启发式算法,能够识别隐藏目录。以下是使用`dirsearch`的一些基本步骤: 1. **安装dirsearch**: 首先,确保你的系统上已经安装了Python。然后,可以通过以下方式安装`dirsearch`: `git clone https://gi
32

dirb使用
`dirb`(Directory Buster)是一个用于在Web服务器上枚举目录和文件的工具。它通过发送HTTP请求并分析响应来探测目标主机上存在的目录和文件。`dirb`的主要目的是帮助安全测试人员和黑客发现目标网站上隐藏的目录,这些目录可能包含敏感信息或安全漏洞。 以下是一些`dirb`工具的基本用法和参数: 1. **基本用法**: `dirb http://targ
40

ubuntu20.04.4安装golang语言
## 1、官网下载安装包 Go下载 - Go语言中文网 - Golang中文社区 https://studygolang.com/dl ## 2、将下载下来的安装包解压到env路径下 ``` tar xf go1.18.linux-amd64.tar.gz ``` ## 3、添加环境变量 通过将Go目录的位置添加到$PATH环境变量中,系统将知道在何处可以找到Go可执行二进制文件。 ``` vim
91

升级 Linux 服务器上的 TLS 版本至 1.2 或更高版本
## 1、检查当前 TLS 版本: 首先,您需要确认当前服务器上所使用的 TLS 版本。您可以通过运行以下命令来检查 OpenSSL 版本和支持的 TLS 版本: ```shell openssl version openssl ciphers -v ``` 如果您的 OpenSSL 版本较旧,可能需要升级 OpenSSL 以支持更高的 TLS 版本。升级 OpenSSL 的具体步骤取决于您所使用
51

茶馆注册商标需要注册哪几个类别?
茶馆注册商标需要综合考虑多个方面,以下是详细介绍: ### 商标查询与评估 在进行茶馆商标注册之前,首先需要进行商标查询与评估,以确定所申请商标是否已经被他人注册或使用,避免侵权纠纷。可以通过中国国家知识产权局商标局的官方网站进行查询。 ### 明确商标注册类别 - **核心类别** - **第30类**:主要包括咖啡、茶、可可和咖啡代用品;米;食用淀粉和西米;面粉和谷类制品;面包、糕
142

咖啡馆注册商标应该注册哪几类?咖啡馆还有配套的公众号和小程序,商标是否需要追加类型?
## 咖啡馆注册商标应该注册哪几类? 咖啡馆注册商标时,需要综合考虑核心业务、相关产品及未来发展可能涉及的领域,以下为你详细介绍需要重点关注的商标类别: ### 核心经营服务类 - **第43类**:提供食物和饮料服务;临时住宿。 - **重要子类别**: - 4301 组包含咖啡馆、餐厅、自助餐厅、快餐馆等服务。咖啡馆日常经营提供饮品、餐食等服务,此类别是必须注册的核心
325

[保姆级] Vue3 开发文档
#### 获取 this `Vue2` 中每个组件里使用 this 都指向当前组件实例,this 上还包含了全局挂载的东西、路由、状态管理等啥啥都有 而 Vue3 中没有 this,如果想要类似的用法,有两种,一是获取当前组件实例,二是获取全局实例,如下自己可以去打印出来看看 ```vue import { getCurrentInstance } from 'vue' // proxy
251

【转载】树莓派时间同步方法,来自博客园
树莓派系统时间不对在《初识树莓派》一文最后一张截图中其实隐藏了一个我没有太在意的时间问题,今天在开发树莓派监控程序的时候才发现。从图中我们可以知道上次登录时间是1970年1月1日星期四的00:03:17分,由此我们可以推断,新安装系统的树莓派默认系统时间应该是1970年1月1日开始的。很明显,这个时间与我们期望的当前时间是不符的。我们需要将系统时间修改为和当前时间同步。第一步:启用网络时间协议为了
365

Web前端开发众包资源共享,探索者联盟兼职开发者招募
# 项目情况 联盟接到合作伙伴的开发需求,有一系列的APP要开发。有很多个APP哦。 ## 需求描述 1. 参考指定APP,基于H5+Vue开发页面。 2. APP并不复杂,无需使用脚手架,cdn引入开发即可。 ## 交付要求 1. 源码交付 2. 代码风格良好,可顺利二次开发 3. 只要满足代码质量要求,能正常走通业务逻辑即可,无严格的APP测试步骤。 ## 预算 具体预算看APP复杂度。目前普
575

探索互联网新机遇,加入精英社群,共创辉煌职业篇章!
【探索互联网新机遇,加入精英社群,共创未来!】 在这个日新月异的互联网时代,每一处都蕴藏着无限可能与创新机遇。我们诚邀您成为“探索者联盟”的一员,与我们一起深度剖析市场动态,精准把握行业趋势,共同开启一段激动人心的职业旅程! 加入我们,您将享受到: - **市场分析**:深度解读互联网行业最新动态,洞悉市场先机。 - **职业规划**:一对一专业指导,定制个性化职业发展路径,助力您步步高升。
336

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