Css手写一个动态进度条吧

一，结构

其实很简单的一个也很常见的一个功能，结构主要是div+span

<div class="rankWarp" >
    <div class="proRank">
      <div class="pro">
        <div class="Warp">
          <span
            class="cItem"
          ></span>
          <span
            class="cItem"
          ></span>
          <span
            class="cItem"
          ></span>
        </div>
      </div>
    </div>
  </div>

二，样式

用到flex布局，以及动态的样式，也可以加上你想要的动画效果

.rankWarp {
  .proRank {
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    .pro {
      height: 10px;
      width: 260px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background-color: rgba(85, 161, 233, 0.3);
      border: 1px solid rgba(85, 161, 233, 0.5);
      border-radius: 10px;
     
      .Warp {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        border-radius: 8px;
         overflow: hidden;
        .cItem {
          width: var(--widthPos);
          height: 8px;
          max-width: 100%;
          background: red;
          &:nth-child(2) {
            background: rgb(241, 211, 35);
          }
          &:nth-child(3) {
             background: rgb(71, 218, 132);
          }
        }
      }
    }
  }
}

三，代码整体

在vue2中的代码格式，在其他框架中其实大同小异，数据后端返回，根据具体数据做修改和渲染

<template>
  <div class="rankWarp" v-if="dataList">
    <div class="proRank">
      <div class="pro" v-for="(item, index) in dataList" :key="index">
        <div class="Warp">
          <span
            class="cItem"
            :style="{ '--widthPos': (item.num1 / item.total) * 100 + '%' }"
          ></span>
          <span
            class="cItem"
            :style="{ '--widthPos': (item.num2 / item.total) * 100 + '%' }"
          ></span>
          <span
            class="cItem"
            :style="{ '--widthPos': (item.num3 / item.total) * 100 + '%' }"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: function() {
        return [
          {
            name: "item1",
            num1: 20,
            num2: 40,
            num3: 40,
            total: 100
          },
          {
            name: "item2",
            num1: 50,
            num2: 10,
            num3: 40,
            total: 100
          }
        ];
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.rankWarp {
  .proRank {
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    .pro {
      height: 10px;
      width: 260px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background-color: rgba(85, 161, 233, 0.3);
      border: 1px solid rgba(85, 161, 233, 0.5);
      border-radius: 10px;
     
      .Warp {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        border-radius: 8px;
         overflow: hidden;
        .cItem {
          width: var(--widthPos);
          height: 8px;
          max-width: 100%;
          background: red;
          &:nth-child(2) {
            background: rgb(241, 211, 35);
          }
          &:nth-child(3) {
             background: rgb(71, 218, 132);
          }
        }
      }
    }
  }
}
</style>

效果：