前端---一个轻量级的进度条组件NProgress, 路由加载时进度条

已于 2022-12-16 11:27:41 修改
阅读量880 收藏
点赞数
文章标签： 前端 javascript vue.js
于 2022-08-29 16:37:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxlny/article/details/126587404
版权
NProgress 是一个轻量级的前端进度条组件，适用于单页应用。通过简单地配置，可以在路由切换和数据请求时显示加载进度。支持自定义颜色，通过 `.set(n)` 设置进度，`.inc()` 随机增加，`.done()` 关闭进度条，以及配置 `trickle` 和 `showSpinner` 控制自动递增和环形动画。
摘要由CSDN通过智能技术生成

前言

NProgress 是一个轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中
可应用在路由加载, 数据请求加载
官方网站：http://ricostacruz.com/nprogre

安装

npm install --save nprogress   
//或者 yarn 方式安装
yarn add nprogress

HTML 直接引入js、css或者通过cdn引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<
最低0.47元/天 解锁文章
阿龙姓张
关注
6个非常经典Web前端使用的炫丽进度条（一）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/1/jindu/index.html
前端轻量级进度条组件 nprogress
qq_38243173的博客
07-11 314
进度条组件
基于Progress组件的进度条
最新发布
hongxiaomeng的博客
07-23 421
前端轻量级进度条NProgress
m0_37518967的博客
11-26 348
//引入NProgress样式及JS &lt;link rel='stylesheet' href="/nprogress/nprogress.css"/&gt; &lt;script src="/nprogress/nprogress.js"&gt;&lt;/script&gt; //app.html中添加启动代码 &lt;script&gt; $(function () { ...
前端轻量级WEB进度条---NProgress
qq_57613837的博客
04-10 212
import '@/components/NProgress/nprogress.less' // 导入样式，否则看不到效果。NProgress.set(n) 作用：设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字。NProgress.start() // 开启进度条。NProgress.start() 作用：开启进度条。NProgress.done() // 关闭进度条。NProgress.done() 作用：关闭进度条。基本是在路由拦截器中使用。
探索开源项目 Progress：简单易用的进度条组件
gitblog_00100的博客
04-06 319
探索开源项目 Progress：简单易用的进度条组件 项目地址:https://gitcode.com/ydtg1993/progress Progress 是一个由开发者 ydtg1993 创建的轻量级前端进度条组件。该项目旨在提供一个易于定制和集成到任何Web应用中的进度条解决方案。本文将深入探讨其技术特性、应用场景及优点，以鼓励更多的开发者尝试并利用这个项目。 项目简介 progress 提...
vue使用nprogress加载路由进度条的方法
10-15
`nprogress` 是一个轻量级的进度条库，它能方便地在页面加载过程中显示进度，提升用户体验。以下是如何在 Vue 中使用 `nprogress` 实现路由加载进度条的详细步骤。 1. **安装**： 首先，你需要通过 npm 或者 yarn ...
在vue项目中使用Nprogress.js进度条的方法
10-18
NProgress.js是专为单页面应用(SPA)设计的轻量级进度条组件，通过简洁的API和样式，能够在用户浏览网站时显示页面加载进度，提升用户体验。在Vue项目中集成NProgress.js非常简单，通过几个步骤即可完成进度条的引入...
前端项目-nprogress.zip
09-03
【前端项目-nprogress.zip】是一个包含前端开发中的轻量级进度条组件的压缩包，名为“nprogress”。这个组件主要用于在网页加载过程中显示简洁而优雅的进度指示，为用户提供加载状态的反馈，提升用户体验。其核心...
vue使用nprogress实现进度条
10-15
NProgress是一个轻量级的进度条库，它非常适合这样的需求。下面我们将详细讨论如何在Vue项目中使用NProgress来实现进度条功能。 首先，我们需要安装NProgress库。在命令行中，运行以下命令： ```bash npm install ...
6个非常经典Web前端使用的炫丽进度条（二）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/2/jindu/index.html
前端Vue自定义精美steps步骤条进度条插件 物流信息跟踪展示组件 流程审批跟进组件
chenchuang0128的博客
07-12 2934
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。
简单的进度条组件
M__Yang_的博客
08-04 224
进度条
推荐开源项目：Progress.js - 精致的前端进度条库
gitblog_00077的博客
03-23 434
推荐开源项目：Progress.js - 精致的前端进度条库 progress.jsProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page. 项目地址:https://gitcode.com/g...
js加载html进度条,NProgress.js-页面加载进度条
weixin_42502643的博客
06-28 381
安装使用npm安装$ npm install --save nprogress或者直接引用 nprogress.js 和nprogress.css 文件到你的页面中。用法只需要调用start() 和 done()来控制进度条NProgress.start(); // 开始加载NProgress.done(); // 加载完成NProgress还提供了其他几个方法，如设置百分比，调用 .set(...
前端组件库
weixin_33782386的博客
03-31 1049
0. 前端自动化(Workflow) 前端构建工具 Yeoman - a set of tools for automating development workflow gulp - The streaming build system grunt - the JavaScript Task Runner F.I.S - 前端集成解决方案 ...
NProgress 实现加载进度条
花铛
04-21 591
NProgress是页面跳转出现在浏览器顶部的进度条。 官网：http://ricostacruz.com/nprogress/ github：https://github.com/rstacruz/nprogress 安装： npm install --save nprogress 使用： //导入 import NProgress from 'nprogress' import 'nprog...
推荐 8 个漂亮实用的 vue.js 进度条组件
LuckyWinty的博客
04-02 2727
为大家精心挑选了 8 个漂亮的 Progress Bars 组件，并附上 GitHub 链接和 vue.js 代码示例，以及Vue3 快速深入全攻略。1.easy-circular-p...
vue---自定义进度条组件
08-19
Vue中可以使用自定义组件来实现进度条的功能。下面是一个简单的示例： ```vue <template> <div class="progress-bar"> <div class="progress" :style="{ width: progress + '%' }"></div> </div> </template> <script> export default { props: { progress: { type: Number, required: true } } } </script> <style> .progress-bar { width: 200px; height: 10px; background-color: #f0f0f0; } .progress { height: 100%; background-color: #42b983; } </style> ``` 在上面的代码中，我们定义了一个名为 "progress-bar" 的自定义组件。它接受一个名为 "progress" 的属性，该属性用于指定进度条的进度。进度条的宽度根据 "progress" 属性的值动态计算并设置。 在使用这个自定义组件时，可以像下面这样传入 "progress" 属性的值： ```vue <template> <div> <custom-progress-bar :progress="50" /> </div> </template> <script> import CustomProgressBar from './CustomProgressBar.vue' export default { components: { CustomProgressBar } } </script> ``` 在上面的代码中，我们在父组件中使用了自定义组件 "custom-progress-bar"，并将 "progress" 属性设置为
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值