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">
        <div
          class="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: true
      default: 'jysg'
    },
    dataList: {
      type: Array,
      // required: true
      default: () => {
        return [...Array(10).keys()]
          .map((num) => {
            return {
              bmmc: '部门' + (num + 1),
              sl: num
            }
          })
          .reverse()
      }
    },
    total: {
      type: [Number, String],
      // required: true
      default: [...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>