css实现进度条并用百分比展示进度

前端自主展示一个进度条动画

需求：后端返回true,则前端展示进度条动画

HTML部分

<div class="bar">
   <div class="cont">
     <p />
   div>
   <span class="txt">{{ rate }}%span>
 div>

CSS部分

.bar{
    // 蓝色逐渐向右填充动画
    @keyframes prog {
        0% {
          width: 0;
        }
        100% {
          width: 224px;// 动画长度和进度条长度一致
        }
      }
      .cont,
      p {
        width: 224px;// 进度条长度
        height: 4px;
        background: #d8d8d8;// 进度条默认颜色
        border-radius: 2px;
      }
      .cont p{
        width: 0;
        background-color: #006FEE; // 动画进度条颜色
        animation: prog 1 2s ease forwards;
      }
     // 进度提示数字展示 
    .txt {
        position: absolute;
        right: 20px;
        bottom: 67px;
        font-size: 12px;
      }
    }

JS

    if (result === true) { // 后端传的结果
      // 数字加载
      let i = 0
      const interval = setInterval(() => {
        i++
        rate.value = i
        if (i === 100) {
          clearInterval(interval)
        }
      }, 20)//20是由动画的2s,2000ms/100(1-100数字总数)=20

根据后端传来的实时百分比展示进度

需求：根据后端返回的百分比，更新进度条

HTML

<div class="item-value">
   <div class="cont">
      <p :style="`width:${ratePercentage}px`" />
   div>
   <span class="txt">{{ rate ? rate : '0%' }}span>
div>

CSS

 .cont,
  p {
    width: 46px; // 进度条长度
    height: 3px;
    background: #d8d8d8; // 进度条默认底色
    border-radius: 2px;
  }

  /* 进度条位置调整 */
  .cont{ 
    position: absolute;
    top: 7px
  }
  .cont p{
 	 background: linear-gradient(224deg, #005eca 0%, #003f93 100%);
  }
  /* 进度提示数字展示 */
  .txt {
    position: absolute;
    bottom: -4px;
    left: 54px;
  }

JS

  const handleList = (text) => {
     //text为后端传来的百分比，string 
     //text='50%' parseFloat(text)=50 46为进度条长度
     //rateN为进度条长度 46*0.5=0.46*50
     const rateN = 0.46 * parseFloat(text)
     rate.value = text
     ratePercentage.value = rateN
  }