css 前端实现通过css动画实现进度条动态加载效果

在这里插入图片描述

效果图

在这里插入图片描述

代码

CommonProcess.vue 进度条动态加载组件代码

<!-- 进度条组件 -->
<template><div class="common_process"><div v-for="(item, index) in dataList" :key="processType + index" class="common_process_item"><div class="common_process_item_dept cyan"><div><span class="common_process_item_dept_index">NO.{{ index + 1 }}</span>{{ item[bmmcField] }}</div><div v-if="processType === 'jysg'">{{ item[slField] | noDataFilter }}</div></div><div class="common_process_item_line"><divclass="common_process_item_line_process":style="{ '--width': (item[slField] / total) * 100 + '%' }"/></div></div></div>
</template><script>
export default {name: 'CommonProcess',components: {},props: {processType: {type: String,// required: truedefault: 'jysg'},dataList: {type: Array,// required: truedefault: () => {return [...Array(10).keys()].map((num) => {return {bmmc: '部门' + (num + 1),sl: num}}).reverse()}},total: {type: [Number, String],// required: truedefault: [...Array(10).keys()].reduce((a, b) => a + b, 0)},bmmcField: {type: String,default: 'bmmc'},slField: {type: String,default: 'sl'}}
}
</script><style lang='scss' scoped>
.common_process {padding: 0 10px;&_item {padding: 7px 0;&_dept {display: flex;justify-content: space-between;margin-bottom: 5px;padding-right: 5px;font-size: 13px;&_index {padding: 2px 3px;border-radius: 3px;background: linear-gradient(90deg, #236cdc 0%, #00c0ff 100%);font-weight: bold;color: #fff;}}&_line {height: 8px;background-color: rgba(64, 158, 255, 0.1);border-top-right-radius: 8px;border-bottom-right-radius: 8px;&_process {position: relative;width: var(--width);height: 100%;background: linear-gradient(90deg, #236cdc 0%, #00c0ff 100%);animation: move 1s; /* 【主要代码】添加动画 */@keyframes move {  /* 【主要代码】添加动画 */0% {width: 0%;}100% {width: var(--width);  /* 【主要代码】宽度不固定，需要计算，通过 style 属性传入 --width */}}&::after {content: '';position: absolute;top: -2px;right: 0;width: 6px;height: 12px;border-radius: 2px;background-color: #fff;box-shadow: 0 0 10px #faad14;}}}}
}
</style>

使用 “进度条动态加载” 组件

<template><CommonProcess v-if="select === 'ybsg'" />
</template><script>
import CommonProcess from './CommonProcess'export default {name: 'Accident',components: {CommonProcess},
}
</script>