一、效果图
二、实现代码
progress值,代表百分百的进度
<template>
<section>
<div class="box">
<div class="mo" :style="{'--progress':-progress+100+'%'}"></div>
<div class="line-box">
<i></i>
<i class="line-item"></i>
<i class="line-item"></i>
<i class="line-item"></i>
<i></i>
</div>
</div>
<el-input-number v-model="progress" :step="10"></el-input-number>
</section>
</template>
<script>
export default {
data() {
return {
progress:58
}
}
}
</script>
<style scoped>
.box {
position: relative;
width: 500px;
height: 20px;
overflow: hidden;
background: linear-gradient(270deg, #FF4D4D 0%, #FADB6D 55.73%, #70FAC8 100%);
}
.mo {
position: absolute;
z-index: 1;
right: 0;
height: 100%;
width: var(--progress, 0%);
background-color: #ccc;
}
.line-box {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.line-box .line-item {
width: 1px;
height: 100%;
background-color: #fff;
}
</style>