NProgress 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
NProgress 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 不详
提 交 者 limichange
适用人群 未知
收录时间 2013-08-21

软件简介

应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。

安装

添加 jQuery (1.8 or above),nprogress.js 和 nprogress.css 到你的项目中。

基本方法

简单的调用 start() 和 done() 方法来控制进度条。

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

当然也可以这样:

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

建议

  • 添加这个到有AJAX调用的地方!绑定到 jQuery ajaxStart 和 ajaxComplete 事件上。

  • 在不使用 Turbolinks/Pjax 的情况下做一个有特效的进度条事件! 绑定到  $(document).ready 和 $(window).load。

展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/08/07 21:24

Vue使用NProgress

NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/rstacruz/nprogress 绿色的进度条就是NProgress实现的效果 安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done(); 使用 //导入 imp...

0
0
发表了博客
2019/05/25 15:32

nprogress页面加载进度条

入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-router' import router from './router' //你的路由文件 //引入nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css' //这个样式必须引入 Vue.use(VueRouter) // 简单配置 NProgress.inc(0.2) NProgress...

0
0
发表了博客
2018/05/21 10:07

在vue中使用nprogress

NProgress的官网:http://ricostacruz.com/nprogress/ 源码地址:https://github.com/rstacruz/nprogress 1、安装 $ npm install --save nprogress 2、在main.js中引入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 3、在main.js中使用 NProgress.configure({ showSpinner: true }); route...

0
0
发表了博客
2018/01/19 11:27

nprogress进度条和ajax全局事件

nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz/nprogress 依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。 NProgress.start() — 显示进度条 NProgress.set(0.4) —设置百分比 NProgress.inc() — 增加一...

0
0
发表了博客
03/05 15:05

Uncaught (in promise) ReferenceError: Nprogress is not defined at eval

Vue项目 main.js : // 导入 Nprogress 及 样式 import NProgress from 'nprogress' import 'nprogress/nprogress.css' // 导入 挂载 配置 axios import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // request拦截器 NProgress.start() axios.interceptors.request.use(co...

0
0
发表了博客
2019/03/27 14:40

vue使用nprogress页面加载进度条

vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/rstacruz/nprogress 下载 nprogress npm install --save nprogress 入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-route...

0
0
发表了博客
2019/04/10 10:10

Vue中使用NProgress实现进度条

简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ricostacruz.com/nprogress/ 效果如下: 安装 ## 1.使用 npm 或者 yarn 安装及可 ① npm install --save nprogress ② yarn add nprogress 两种任选一种安装 ## 2.用法 NProgres...

0
0
发表了博客
07/03 13:00

React、Vue添加全局的请求进度条(nprogress)

长按识别下方二维码,即可"关注"公众号 每天晚上,干货准时奉上! 全局的请求进度条,我们可以使用nprogress来实现,效果如下: 首先需要安装插件: npm i nprogress -S 然后使用的时候主要有两种方式,第一种是切...

0
0
发表了博客
2019/10/30 16:53

Vue项目开发,nprogress进度条加载之超详细讲解及实战案例

Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装: 基本的使用方式 你可以调用 start() 和done()来进行进度条的控制 如果你准备在jQuery的Ajax调用接口的时候使用它的话可以考虑将其绑定到 ...

0
0
发表了博客
09/14 07:31

电商后台管理系统商品报表功能——通过nprogress添加进度条效果

一 优化策略 1 生成打包报告 2 第三方库启动CDN 3 Element UI组件按需加载 4 路由懒加载 5 首页内容定制 二 点睛 1 安装 nproress 依赖 2 官网 https://github.com/rstacruz/nprogress#readme 三 代码 1 修改 main.js import Vue from 'vue' import App from './App.vue' import router from './router' import './plug...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
23 收藏
分享
返回顶部
顶部