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

CSS+JS实现进度条动画

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


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

HTML部分

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

  
"div1">
    
"ul">
        

        

        

        

        

    
    "btn" οnclick="goLoad()">开始/重置
  
  

  
  
"div2">
    
"line-box">
      
"line">
    
  

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