css 动态加载进度条，从左向右动态展示

原创

已于 2025-04-03 10:29:14 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

于 2022-10-26 09:32:52 首次发布

博客主要讲述了前端组件封装与使用，具体封装了commonProcess.vue组件，并在父组件中引入使用，最后展示了最终效果。

封装组件commonProcess.vue

<template>
  <div class="commonStyle process-info">
        <div class="process-box" :key="new Date()">
          <div class="line">
          </div>
          <div class="process">
            <div
              class="processList"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="processName">
                {
   
   {
   
    item.name }}
              </div>
              <div class="processTime">
                {
   
   {
   
    item.time ? item.time : '数据丢失' }}
              </div>
              <img :src="getCurrentStatusImg(item.time)" alt="" />
              <div class="processDay" v-if="index != dataList.length - 1">
                {
   
   {
   
    item.time || '数据丢失'}}
              <