nprogress 插件网页顶部加载进度条

文章目录

效果（看顶部）
安装
使用
- 1.基本用法
- 2.高级用法

效果（看顶部）

安装

CSDN地址（我设置的免积分，推荐下载）：https://download.csdn.net/download/weixin_45525272/14944311

GitHub地址：https://github.com/rstacruz/nprogres

外链引入方式（将包里的 .js .css移动到工程中）

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

NPM安装方式

$ npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用

1.基本用法

利用NProgress.start()显示进度条
```
NProgress.start()
```
利用NProgress.done()隐藏进度条
```
NProgress.done()
```

2.高级用法

设置百分比：调用 .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();
```

特定值增量：调用 .inc(n) 方法以特定值递增进度条

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

强制完成：通过传递 true 到 .done() 方法，将显示进度条，即使它未显示（默认如果不调用 .start() 方法， .done() 方法不会做任何事）
```
NProgress.done(true);
```
获取状态值：使用 .status 获取状态值
```
NProgress.status
```

nprogress 插件网页顶部加载进度条相关推荐

pace.js网页自动加载进度条插件-好东西
pace.js – 网页自动加载进度条插件源码地址 https://github.com/HubSpot/pace 入Pace.js以及主题文件 Pace.js公开的API列表, Pace.star ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
Hexo博客NexT主题美化之顶部加载进度条
前言更多效果展示,请访问我的个人博客. 效果图: 教程进入博客文件夹的/themes/next文件夹下 cd /themes/next 复制代码下载安装Progress module,如下 g ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

nprogress 插件网页顶部加载进度条

文章目录

效果（看顶部）

安装

使用

1.基本用法

2.高级用法

nprogress 插件网页顶部加载进度条相关推荐

最新文章

热门文章

nprogress 插件 网页顶部加载进度条

文章目录

效果（看顶部）

安装

使用

1.基本用法

2.高级用法

nprogress 插件 网页顶部加载进度条相关推荐

最新文章

热门文章

nprogress 插件网页顶部加载进度条

nprogress 插件网页顶部加载进度条相关推荐