数据可视化大屏项目开发中,需要一个进度条加载的效果,这里将实现代码记录下来。
动态效果
<template>
<div class="progressBar">
<div class="progressBarInner">
<div class="progressBarInner2" ref="progressBarInner2"></div>
<div class="list">
<div class="listItem" v-for="(item,index) in list" :key="index">
<div class="listItemInner" :class="{'active':active>item.id}" @click="active=item.id">
<div class="dot"></div>
<p>{{ item.name }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {gsap} from "gsap";
export default {
name: "title",
data() {
return {
list: [],
active: 11
}
},
components: {},
mounted() {
for (let i = 0; i < 12; i++) {
this.list.push({
id: i + 1,
name: `${i + 1}月`
});
}
this.animateProgressBar();
},
methods: {
animateProgressBar() {
const progressBar = this.$refs.progressBarInner2;
gsap.to(progressBar, {
width: `${(this.active / 12) * 100 - 4}%`,
duration: 3,
ease: "power1.out"
});
}
},
watch: {
active() {
this.animateProgressBar();
}
}
}
</script>
<style lang="scss" scoped>
.progressBar {
position: relative;
width: calc(100% - 0px);
height: 125px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.progressBarInner {
height: 3px;
background: #2973DF;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-top: 30px;
.progressBarInner2 {
height: 3px;
background: #5CE6FF;
}
.list {
position: absolute;
left: 0;
width: 100%;
height: 50px;
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.listItem {
width: calc(100% / 12 - 0px);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.listItemInner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
font-size: 12px;
color: #fff;
cursor: pointer;
p {
font-size: 16px;
font-family: AlimamaShuHeiTi;
font-weight: bold;
color: #D9F7FF;
}
.dot {
background: url("./assets/dot1.png") no-repeat;
width: 34px;
height: 34px;
}
}
.listItemInner.active{
.dot {
background: url("./assets/dot2.png") no-repeat;
width: 34px;
height: 34px;
}
}
}
}
}
}
</style>