html+css+js实现step进度条效果

实现效果

代码实现

HTML部分

html 复制代码
<div class="box">
    <ul class="step">
      <li class="circle actives ">1</li>
      <li class="circle">2</li>
      <li class="circle">3</li>
      <li class="progress"></li>
    </ul>
    <ul class="text">
      <li class="item shows">步骤一</li>
      <li class="item">步骤二</li>
      <li class="item">步骤三</li>
    </ul>
    <button>下一步</button>
  </div>

CSS部分

css 复制代码
<style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    ul{
      list-style: none;
    }
    .box{
      padding: 25px;
      margin: 50px auto;
      width: 870px;
      height: 160px;
      border: 1px solid #c0c4cc;
    }
    .step{
      position: relative;
      display: flex;
      justify-content: space-between;
      height: 25px;
      line-height: 25px;
    }
    .step::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 3px;
      background-color: #c0c4cc;
      z-index: -2;
    }
    .step .circle{
      position: relative;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 2px solid #c0c4cc;
      text-align: center;
      background-color: #fff;
      line-height: 22px;
      color: #c0c4cc;
    }
    .step .circle.actives{
      position: relative;
      color: black;
      border: 2px solid black;
      font-weight: bold;
    }
    .step .circle.circle.active::before{
      content: '';
      position: absolute;
      left: -2px;
      top: -2px;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #67c23a;
      text-align: center;
      background-image: url(./03.png);
      background-size: cover;
      line-height: 22px;
      transition:0.5s ease ;
    }
    .step .progress{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width:0%;
      background-color: #67c23a;
      height: 3px;
      z-index: -1;
      transition:0.5s ease;
    }
    .text{
      display: flex;
      justify-content: space-between;
      height: 38px;
      line-height: 38px;
      margin-bottom: 10px;
    }
    .text li{
      color:#c0c4cc ;
      font-weight: bold;
    }
    .text li.shows{
      color: black;
      font-weight: bold;
    }
    .text li.show{
      color: #67c23a;
    }
    button{
      cursor: pointer;
      padding: 8px 15px;
      background-color: #fff;
      color: #c0c4cc;
      border: 1px solid #c0c4cc;
      border-radius: 3px;
    }
    button:hover{
      border: 1px solid rgba(64, 158, 255, 0.1);
      background-color:rgba(64, 158, 255, 0.1);
      color:#409eff ;
    }
    button:disabled{
      background-color: #e0e0e0;
      cursor: not-allowed;
    }
  </style>

JS部分

javascript 复制代码
<script>
    const btn=document.querySelector('button')
    const circles=document.querySelectorAll('.circle')
    const progress=document.querySelector('.progress')
    const items=document.querySelectorAll('.item')
    let i = -1
    btn.addEventListener('click',function(){
      i++
      if(i>=circles.length) return btn.disabled=true
      if(i<circles.length){
        // 对号变化
        circles[i].classList.add('active')
        // 文字
        items[i].classList.add('show')
        // 进度条
        const actived=document.querySelectorAll('.active')
        progress.style.width=(actived.length-1) / (circles.length-1) * 100 + '%'
      }
      if(i<circles.length-1){
        circles[i+1].classList.add('actives')
        items[i+1].classList.add('shows')
      }
    })
  </script>
相关推荐
江城开朗的豌豆18 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了31 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆36 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆37 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆38 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子1 小时前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js