巧用CSS实现进度条-一一网

这是我参与更文挑战的第17天，活动详情查看：更文挑战 !

? 概论

进度条相信大家都不要陌生，但大家在碰到进度条的时候是否有考虑过进度条是怎么实现的呢？其实进度条的并不算很难，单纯靠css就能完美实现进度条样式。下面就来和大家介绍介绍直线式进度条和分段式进度条的css实现方法。

? 直线式进度条

直线式进度的实现最为简单，总体思路是一个div当背景轨道，另外一个div嵌套在其内部，通过动态改变二号div的长度来实现进度条滚动效果。

代码如下（这里我们没有用官方提供的内置动画曲线，而是选择了手动设置）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bg {
        margin: 60px auto;
        width: 500px;
        height: 10px;
        border-radius: 4px;
        background-color: rgb(222, 228, 247);
        display: flex;
        align-items: center;
      }
      .bg-line {
        background-color: rgb(222, 228, 247);
      }

      .inner {
        height: 100%;
        border-radius: 4px;
        transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
      }

      .line {
        width: 90%;
        background-color: blue;
      }

    </style>
  </head>
  <body>
    <div class="bg-line bg">
      <div class="line inner"></div>
    </div>
  </body>
</html>

复制代码

再用JS添加一点动画效果（当然你也可以用animation）：

const percentage = 98
cosnt inner = document.querySelector('.inner')
setInterval(()=>{
    inner.style.width = percentage + '%'
    setTimeout(()=>{
        inner.style.width = 0
    },1000}
},2000}
        
复制代码

动画.gif

? 分段式进度条

分段式进度条的实现略麻烦一点，总体思路是先拿一个div当总体背景轨道，内部套用数个（一般是五个）间隔开的圆角矩形作为容器，再在内部嵌套表示进度的小矩形。通过动态改变小矩形的长度来实现进度条滚动效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bg {
        margin: 60px auto;
        width: 500px;
        height: 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
      }
      .bg-step {
        background-color: #fff;
      }

      .step {
        height: 100%;
        border-radius: 4px;
        transition: all 0.5s cubic-bezier(0, 0.64, 0.36, 1);
        width: 20%;
        margin-right: 5px;
        background-color: rgb(222, 228, 247);
        display: flex;
        align-items: center;
      }
      .step:last-child {
        margin-right: 0;
      }

      .val {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background-color: blue;
      }
      .step:last-child .val {
        width: 70%;
      }
    </style>
  </head>
  <body>

    <div class="bg-step bg">
      <div class="step inner">
        <div class="val"></div>
      </div>
      <div class="step inner">
        <div class="val"></div>
      </div>
      <div class="step inner">
        <div class="val"></div>
      </div>
      <div class="step inner">
        <div class="val"></div>
      </div>
      <div class="step inner">
        <div class="val"></div>
      </div>
    </div>
  </body>
</html>

复制代码