最近做到一个下载和导入的进度条效果,所以做了一个小插件,自己记录一下,然后分享一下
1、先看实现的效果
2、看实现的代码,样式的话我是根据UI出的图搞得,可以自行更改
<template>
<div class="progressbar">
<div class="progressbar1">
<div class="bar" :style="{ width: value1 }"></div>
<div class="label" :style="{ left: value1 }">
<span></span>{{ value.toFixed(2) }}%
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
};
},
props: ["value"],
created() {},
mounted() {},
computed: {},
watch: {},
methods: {},
watch: {
value(newVal, oldVal) {
this.value1 = newVal + "%";
},
},
};
</script>
<style scoped>
.progressbar {
position: relative;
display: block;
width: 80%;
height: 20px;
padding: 10px 25px;
border-radius: 16px;
margin: 40px auto;
-webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
0px -3px 3px -3px rgb(0 0 0 / 25%);
box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
0px -3px 3px -3px rgb(0 0 0 / 25%);
}
.progressbar1 {
position: absolute;
display: block;
content: "";
width: calc(100% - 50px);
height: 20px;
top: 10px;
left: 25px;
border-radius: 20px;
background: #dfdfdf;
}
.bar {
position: absolute;
display: block;
width: 50%;
height: 20px;
top: 0;
left: 0;
background-color: #0077ffcc;
border-radius: 20px;
background-size: 3em 3em;
background-image: linear-gradient(
-45deg,
transparent 0em,
transparent 0.7em,
#0077ff 0.9em,
#0077ff 2.1em,
transparent 2.1em,
transparent 2.9em,
#0077ff 3.1em
);
animation: ani 500ms infinite linear;
-webkit-box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
0px -3px 3px -3px rgb(0 0 0 / 25%);
box-shadow: 0px 4px 4px -4px rgb(0 0 0 / 40%),
0px -3px 3px -3px rgb(0 0 0 / 25%);
}
@keyframes ani {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
.label {
position: absolute;
display: block;
width: 70px;
height: 30px;
line-height: 30px;
top: 30px;
left: 0;
background-color: #0077ff;
transform: translateX(-35px);
/* overflow: hidden; */
font-size: 14px;
border-radius: 5px;
color: white;
text-align: center;
}
.label span {
display: block;
width: 0;
height: 0;
border: 10px solid #0077ff;
position: absolute;
top: -20px;
left: 25px;
border-top: 10px solid rgba(21, 255, 0, 0);
border-left: 10px solid rgba(0, 17, 255, 0);
border-right: 10px solid rgba(255, 0, 242, 0);
border-bottom: 10px solid #0077ff;
}
</style>
3、引入使用插件,这是我的文件目录
4、进度条.vue页面插件引入,这里为实现动态效果,用的定时器,模拟请求进度
<template>
<div class="root">
<ProgressBar :value="value"></ProgressBar>
</div>
</template>
<script>
import ProgressBar from "../components/ProgressBar.vue";
export default {
data() {
return {
value: 0,
};
},
created() {},
mounted() {
let timer = setInterval(() => {
if (this.value >= 100) {
this.value =100;
clearInterval(timer);
} else {
this.value += 0.1;
}
}, 10);
},
computed: {},
components: { ProgressBar },
watch: {},
methods: {},
};
</script>
5、OK OK,到此结束,欢迎回复优化建议,共同提高