前端学习——CSS+JS实现进度条动画

CSS+JS实现进度条动画

之前学习了导航条，那现在就来学习一下进度条。本次的学习试着写了两种风格的进度条，一种是圆点，一种是传统的条状。如下图：


简单介绍一下，点击按钮之后，圆点的效果是蓝色部分从零开始变大，到充满了整个父标签，从左向右进行；传统条状的效果就单纯的从左向右进行。由于有光晕的效果，父标签应该允许溢出部分显示。再次点击按钮就重置为原来的样子。
话不多说，直接开始。

HTML部分

HTML部分很简单，只需要几个div和li就好，当然还有中间的按钮。

<!-- 圆点进度条 -->
  <div class="div1">
    <ul class="ul">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
    <button class="btn" οnclick="goLoad()">开始/重置</button>
  </div>
  <hr>
  <!-- 条状进度条 -->
  <div class="div2">
    <div class="line-box">
      <div class="line"></div>
    </div>
  </div>

CSS部分

圆点进度条

基本样式：

.div1{
   
      position: relative;
      width: 100%;
      height:calc(33.33vh);
    }
.ul{
   
      position: absolute;
      height: 32px;
      width: 190px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
.ul::after{
   
      content: "";
      clear: both;
      display: block;
      overflow:hidden;
    }
.ul li{
   
      position: relative;
      list-style: none;
      width: 30px;
      height