「 纯css实现进度条百分比效果」

1、给一个简单的html结构

loadingWidth 表示进度条的显示进度
可以在接口请求时自定义进度条的显示进度

<div class="progress">
    <div class="progress-status">
      <div class="progress-inner" :style="{ width: `${loadingWidth}%` }">
        <div class="progress-mask"></div>
      </div>
    </div>
    <div class="progress-text">
      {{ '页面加载中...' }}
    </div>
  </div>

.progress {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 100%;
  height: 100vh;
  &-status {
    position: absolute;
    top: 300px;
    left: 78px;
    width: 220px;
    height: 8px;
    border-radius: #fff;
    background-color: #fff;
    border-radius: 10px;
  }

  &-inner {
    display: block;
    width: 0;
    height: 100%;
    transition: left 1s linear;
  }
// process 动效 loading 2s 结束 可更改
  &-mask {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(to right, #00e0b5, #00c2c6);
    animation: process 2s linear forwards;
  }
  &-text {
    position: absolute;
    left: 140px;
    top: 330px;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    color: #3d3d3d;
  }
}

@keyframes process {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }