nprogress文档（中英双语）

最新推荐文章于 2024-07-10 15:34:37 发布
最新推荐文章于 2024-07-10 15:34:37 发布
阅读量573 收藏
点赞数 1
分类专栏： 加载进度条 Nprogress 文章标签： 前端 ajax
原文链接：https://github.com/rstacruz/nprogress#tricklespeed 
版权
NProgress是一个轻量级的进度条库，适用于Ajax应用程序。文章介绍了其安装、基本和高级用法，以及如何进行配置和自定义。通过NProgress，可以在Ajax请求期间展示进度，提升用户体验。同时，文章也提及了Turbolinks和Pjax的概念，以实现更快的页面加载。
摘要由CSDN通过智能技术生成

 翻译不准，只求个方便

Minimalist progress bar （极简进度条） 

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

（ Ajax应用程序的细长进度条。受谷歌、YouTube和Medium的启发。） 

Installation （安装）

Add nprogress.js and nprogress.css to your project.（将 nprogress.js 和 nprogress.css 引入你的项目）

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

NProgress is available via bower and npm. （ NProgress可通过 bower 和 npm 获取.）

$ npm install --save nprogress

Also available via unpkg CDN: （也可以通过 unpkg CDN 使用）

Basic usage （基本用法）

Simply call start() and done() to control the progress bar. （简单的调用 start(

最低0.47元/天 解锁文章
m0_61452376
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目优化
相守之路
07-02 275
vue项目开发完后，进行一些必要的优化 1.通过nprogress给页面增加进度条效果 nprogress官方文档 1.安装依赖 npm install --save nprogress 2.导入js及css import NProgress from 'nprogress' import 'nprogress/nprogress.css' 3.使用 在axios拦截器中添加如下方法 发起请求前调用 start() 服务器相应后调用 done() // request拦截器 service.
NProgress的使用（一）vue项目中使用NProgress
XSL_HR的博客
03-28 5307
平时我们在打开一个网页时，网页的顶部会有一个进度条，这个进度条不仅能够反映网页加载的速度，也能很好的增强用户体验。那么这个进度条是如何实现的呢？其实这是一个第三方开源的组件——NProgress。
NProgress 的使用
最新发布
F2297468264的博客
07-10 461
作用：设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字。NProgress 是前端轻量级 web 进度条插件。作用：以随机量递增进度条，但永远不会达到 100%。作用：进度条开始时的百分比（默认0.08）NProgress 一般搭配路由守卫使用。作用：是否显示右上角螺旋加载提示。作用：设置父容器（默认body）
vue进度条插件nprogress
一个懒惰前端的博客
08-11 775
vue进度条插件nprogress
在vue3中安装nprogress进度条，以及更换颜色
weixin_43268495的博客
12-05 3939
关于nprogress在vue3+ts中的使用笔记
NProgress进度条简单使用
socaicaicaicai的博客
08-13 1714
安装 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
NProgress，前端必备进度条插件，你值得拥有
每天进步一点点
04-25 4万+
官方网站：http://ricostacruz.com/nprogress/
NProgress.js-页面加载进度条
weixin_44264878的博客
07-16 746
安装 使用npm安装 $ npm install --save nprogress 或者直接引用 nprogress.js 和nprogress.css 文件到你的页面中。 <script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/> 用法 只需要调用st...
NProgress顶部进度条的用法
weixin_44161385的博客
11-02 186
nprogress进度条插件
Vue使用NProgress
松烟入墨
08-28 12万+
NProgress是页面跳转是出现在浏览器顶部的进度条 官网：http://ricostacruz.com/nprogress/ github：https://github.com/rstacruz/nprogress 如下图所示，绿色的进度条就是NProgress实现的效果 1、安装 $ npm install --save nprogress 或者 $ yar...
【NProgress】NProgress插件的用法：
SunPeng的博客
06-16 288
【NProgress】NProgress插件的用法：
nprogress进度条的简单使用
victorylip的博客
06-28 184
vue使用nprogress进度条
nprogress进度条插件使用
陈皮糖的博客
04-07 5862
nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件 使用步骤: 引入js文件和css文件 <link rel='stylesheet' href='nprogress.css'/> <script src='nprogress.js'></script> 使用进度条插件 引入了nprogress.js文件后，就有了一个...
【Vue.js 3.0】NProgress 进度条
day day up
04-03 683
在 Vue 3 中使用 NProgress，你需要先安装 NProgress，然后在你的 Vue 应用中引入它，并在适当的生命周期钩子或路由守卫中调用它的方法。以下是一个简单的例子来展示如何在 Vue 3 应用中集成 NProgress。
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 26万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
NProgress.start();请求的进度条
iot3000的博客
10-13 6295
https://github.com/rstacruz/nprogress.git 点击打开链接
nprogress进度条的安装与使用
纸鸢的博客
07-20 2496
NProgress是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中npm官网链接https。
Vue：页面加载进度条
一个头发贼多的小火鸡
12-25 6186
这段时间在踩Ant design pro Vue的坑，发现了个在手机端页面上经常出现的，加载进度条，效果蛮不错的！记录下来。   cnpm install --save nprogress import NProgress from 'nprogress' import 'nprogress/nprogress.css' NProgress.configure({ showSpinn...
vue安装nprogress(进度条动画)
实习打字猿的博客
04-26 1034
# npm npm install --save nprogress # 引入 index.js src/router/index.js import Vue from "vue"; import VueRouter from "vue-router"; import NProgress from "nprogress"; // 引入进度条动画 // 进度条动画配置 NProgress.configure({ showSpinner: false // 是否显示加载ico }); Vue.use
提升浏览器性能：高阶JavaScript实战指南（中英双语）
《高性能JavaScript：中英双语版》是一本详尽探讨JavaScript性能优化的权威著作，它于2010年发布，针对开发人员面临的最紧迫问题——浏览器中的JavaScript性能。书中首先强调了JavaScript执行的阻塞性质，由于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值