背景:基于内部OA系统任务进度,自定义的一个动态效果的进度条。
1. 实现方式 - 组件封装
<template>
<div class="wrap">
<div class="progress-bar">
<div class="progress"></div>
<div class="inner" :style="{'--left':progress + '%'}"></div>
<div class="runner" :style="{'--left':progress + '%'}"></div>
</div>
</div>
</template>
<script>
export default {
name: 'index',
props: {
progress: {
type: [Number,String],
default: '0'
}
},
data(){
return{
}
}
}
</script>
<style lang="scss" scoped>
.wrap{
position: relative;
height: 40px;
}
.progress-bar {
position: absolute;
top: 23px;
width: 100%;
height: 8px;
border-radius: 6px;
background-color: rgb(255,237,212);
.inner{
position: absolute;
top: 0;
z-index: 10;
border-radius: 6px;
height: 100%;
background: #f28e01;
transition: left 1s ease-in-out;
animation: changeWidth 1s forwards linear,shrink 1s linear infinite;
background-image: url(~@/assets/images/progress-item.png);
}
}
.progress {
width: 0%;
height: 100%;
background-color: #00aaff;
transition: width 1s ease-in-out;
}
.runner {
width: 60px;
height: 24px;
background-image: url(~@/assets/images/run.gif) ;
background-size: contain;
position: absolute;
top: -22px;
transition: left 1s ease-in-out;
animation: run 1s forwards linear;
margin-left: -55px;
}
@keyframes run {
0% { left: 0; }
100% { left: var(--left); }
}
@keyframes changeWidth {
0% { width: 0; }
100% { width: var(--left); background-position: 40px 0}
}
@keyframes shrink {
0% { background-position: 0 0}
100% { background-position: 40px 0}
}
</style>
2. 引入并使用
<TaskProgress :progress="90"/>
3. 实现效果
4. 资源文件
(动态gif)
(静态进度条片段)