2024年06月19日 建站教程
进度条效果是指在执行某些任务时，在网站或应用程序中出现的指示任务进度的动态进度条。这不仅鼓励用户等待，还为用户提供了对任务执行时间的实际了解。下面web建站小编给大家简单介绍一下具体实现代码！
具体代码如下：
<template>
<div>
<div class="progress">
<div class="progress-bar" :></div>
</div>
<button @click="startTask">开始任务</button>
</div>
</template>
<script>
export default {
data() {
return {
progress: 0
};
},
methods: {
startTask() {
setInterval(() => {
this.progress += 10;
if (this.progress >= 100) {
clearInterval();
}
}, 1000);
}
}
};
</script>
<style>
.progress {
width: 100%;
position: relative;
height: 15px;
background-color: #ddd;
margin: 20px 0;
}
.progress-bar {
height: 100%;
position: absolute;
background-color: #3498db;
transition: width 0.3s ease-in-out;
}
</style>
本文链接：http://so.lmcjl.com/news/6862/