vue 在浏览器顶部显示进度条

本文介绍了如何通过NProgress插件在Vue应用中创建动态加载进度条,包括安装步骤、引入配置及在路由切换时的使用。重点讲解了配置参数和关键代码段,帮助开发者提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要借助于 NProgress 插件

安装:
$ npm install --save nprogress
或者 $ yarn add nprogress

在main.js中引入:

import NProgress from ‘nprogress’; // Progress 进度条
import ‘nprogress/nprogress.css’; // Progress 进度条样式

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

NProgress.configure({
easing: ‘ease’, // 动画方式
speed: 500, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3 // 初始化时的最小百分比
})
router.beforeEach((to, from, next) => {

// 每次切换页面时,调用进度条
NProgress.start();

// 这个一定要加,没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
next();
})
router.afterEach(() => {
NProgress.done()
})

<think>我们被要求使用Vue和CSS来实现一个圆形进度条。根据引用内容,有几种不同的实现方式,包括使用SVG和纯CSS(使用conic-gradient)。考虑到用户明确要求使用CSS,我们可以采用引用[3]中的纯CSS方法,并结合Vue进行数据绑定和动态更新。引用[3]提供了一个使用CSS的conic-gradient属性实现的圆形进度条。基本思路是:1.使用一个圆形容器(圆形通过border-radius:50%实现)。2.背景使用conic-gradient,其中进度部分和剩余部分用不同的颜色,通过CSS变量(--progress)来控制完成的百分比。3.在容器内部使用一个遮罩层(伪元素)来显示中间的空白,使其看起来是一个圆环。4.添加文本显示进度百分比。结合Vue,我们可以:-使用Vue的数据绑定来动态更新进度值。-通过按钮或其他交互方式来改变进度值,从而更新进度条和文本。由于引用[4]提供了Vue组件的代码结构,我们可以参考其组织方式,但实现方式采用引用[3]的CSS方法。下面是一个使用Vue和CSS实现圆形进度条的示例代码。我们将创建一个Vue组件,该组件接收一个`progress`属性(0-100),并显示相应的圆形进度条。注意:我们使用Vue的单文件组件格式(.vue文件)来编写。```vue<template><div><!--圆形进度条容器--><divclass="progress-circle":style="{'--progress':progress+'%'}"><divclass="progress-text">{{progress}}%</div></div><!--控制按钮(可选)--><divclass="controls"><button@click="increase">增加</button><button@click="decrease">减少</button><button@click="reset">重置</button></div></div></template><script>exportdefault{name:'CircleProgressBar',data(){return{progress:0//初始进度为0};},methods:{increase(){if(this.progress<100){this.progress+=10;}},decrease(){if(this.progress>0){this.progress-=10;}},reset(){this.progress=0;}}};</script><stylescoped>/*容器*/.progress-circle{width:150px;height:150px;border-radius:50%;background:conic-gradient(#4caf500%,#4caf50var(--progress),#e0e0e0var(--progress),#e0e0e0100%);position:relative;display:flex;align-items:center;justify-content:center;}/*遮罩层,用于显示圆形(中间挖空)*/.progress-circle::before{content:'';position:absolute;width:80%;height:80%;border-radius:50%;background:white;}/*进度文本*/.progress-text{position:relative;font-family:Arial,sans-serif;font-size:24px;color:#333;z-index:1;/*确保文本在遮罩层之上*/}/*控制按钮样式*/.controls{margin-top:20px;}.controlsbutton{margin:05px;padding:5px10px;cursor:pointer;}</style>```###说明:1.**模板部分**:-使用一个`div`作为进度条的容器,通过绑定内联样式动态设置`--progress`变量的值(即当前进度百分比)。-在容器内部,一个文本元素显示当前进度。-添加三个按钮用于增加、减少和重置进度。2.**脚本部分**:-在`data`中定义`progress`,初始为0。-三个方法分别用于改变`progress`的值,注意边界控制(0到100之间)。3.**样式部分**:-使用`conic-gradient`创建锥形渐变背景,其中已完成部分(#4caf50)从0%到`var(--progress)`,未完成部分(#e0e0e0)从`var(--progress)`到100%。-使用伪元素`::before`作为遮罩层,形成圆环中间的空白部分。-文本使用绝对定位居中,并设置z-index确保在遮罩层之上。###注意事项:-该实现使用了CSS变量(--progress),现代浏览器都支持,但如果需要支持较旧浏览器,可能需要使用其他方法(如SVG)或增加兼容处理。-使用scoped样式,确保样式只在该组件内生效。###效果:用户将看到一个圆环,其进度部分为绿色,未完成部分为灰色。圆环中间有当前进度的百分比数字。通过按钮可以增加、减少或重置进度。这个示例结合了Vue的数据绑定和事件处理,以及CSS的conic-gradient特性,实现了一个动态更新的圆形进度条。</think> 根据您的需求,我将演示如何使用 Vue.js 和纯 CSS 实现一个动态圆形进度条。以下是完整实现方案: ### Vue 圆形进度条组件 (CSS实现) ```vue <template> <div class="circle-progress-container"> <!-- 进度条主体 --> <div class="progress-circle" :style="{ '--progress': `${progress}%`, '--color-start': colorStart, '--color-end': colorEnd, '--bg-color': bgColor }" > <!-- 进度文本 --> <div class="progress-text"> {{ progress }}% </div> </div> <!-- 控制按钮 --> <div class="controls"> <button @click="increase">增加</button> <button @click="decrease">减少</button> <button @click="reset">重置</button> </div> </div> </template> <script> export default { name: 'CircleProgressBar', props: { // 初始进度 (0-100) initialProgress: { type: Number, default: 0, validator: value => value >= 0 && value <= 100 }, // 进度条颜色设置 colorStart: { type: String, default: '#4caf50' // 绿色起点 }, colorEnd: { type: String, default: '#2196f3' // 蓝色终点 }, // 背景色 bgColor: { type: String, default: '#e0e0e0' // 灰色背景 } }, data() { return { progress: this.initialProgress }; }, methods: { increase() { if (this.progress < 100) { this.progress += 10; } }, decrease() { if (this.progress > 0) { this.progress -= 10; } }, reset() { this.progress = 0; } }, watch: { // 允许从外部更新进度 initialProgress(newVal) { if (newVal >= 0 && newVal <= 100) { this.progress = newVal; } } } }; </script> <style scoped> .circle-progress-container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .progress-circle { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient( transparent 0%, transparent var(--progress), var(--bg-color) var(--progress), var(--bg-color) 100% ); position: relative; display: flex; align-items: center; justify-content: center; } /* 遮罩层创造圆环效果 */ .progress-circle::before { content: ''; position: absolute; width: 84%; /* 调整宽度控制圆环厚度 */ height: 84%; border-radius: 50%; background: linear-gradient( to right, var(--color-start), var(--color-end) ); /* 使用裁剪路径实现缺口效果 */ clip-path: polygon( 50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0% ); } /* 中心区域 */ .progress-circle::after { content: ''; position: absolute; width: 75%; /* 中间空白区域 */ height: 75%; border-radius: 50%; background: white; z-index: 1; } .progress-text { position: relative; font-size: 32px; font-weight: bold; color: #333; z-index: 2; /* 确保文本在顶层 */ } .controls { display: flex; gap: 10px; } .controls button { padding: 8px 16px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .controls button:hover { background: #0b7dda; } </style> ``` ### 技术说明 1. **实现原理**: - 使用 CSS `conic-gradient` 创建环形背景 - 通过 CSS 变量 `--progress` 动态控制进度 - 使用 `clip-path` 实现缺口效果 - 双伪元素(::before, ::after)构建多层视觉效果 2. **特点**: - 纯 CSS 实现,无需 SVG - 支持动态渐变颜色 - 可自定义进度缺口(默认缺口在顶部) - 响应式设计,可调整尺寸 3. **使用方法**: ```vue <CircleProgressBar :initialProgress="30" color-start="#ff5722" color-end="#ffc107" /> ``` 4. **自定义选项**: - `initialProgress`: 初始进度 (0-100) - `color-start`/`color-end`: 进度条渐变起点/终点颜色 - `bg-color`: 背景色(未填充部分) ### 示例效果 当进度为 60% 时,组件显示如下: 1. 60% 的彩色环形进度条顶部有缺口) 2. 中间显示白色区域和 "60%" 文本 3. 下方有控制按钮用于增减进度 这种方法参考了 CSS 的新特性[^3],结合 Vue 的响应式数据绑定[^1],实现了纯 CSS 的圆形进度条方案,相比 SVG 方案代码更简洁[^4]。 ### 注意事项 1. `clip-path` 兼容性:现代浏览器支持良好,但对 IE 不兼容 2. 调整进度条厚度:修改 `::before` 的宽高百分比值 3. 调整缺口位置:修改 `clip-path` 的多边形坐标 4. 渐变效果:通过修改 `background` 属性可以改变渐变方向 此实现避免了使用 SVG[^2],完全采用 CSS 解决方案,符合您的要求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值