jquery手写面包屑 进度条 （已完成/正在进行/待完成三种状态）

小logo可以变化，我在iconfont.com里找了三种，不是很合适，这里只是发博客用。项目里ui会给图的



代码：

    <!-- 目标位置包裹面包屑，jquery失效的话去bootcdn找一个 -->
 <div class="nav-wrap"></div>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

 /*页面导航*/
        .nav {
            width: 95%;
            height: 0.25rem;
            background-color: #e5e5e5;
            border-radius: 2rem;
            margin: 0 auto;
            position: relative;
            top: 1rem;
        }

        /*进度条*/
        .nav-line {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 60%;
            height: 5px;
            background-color: #80b8f8;
            border-radius: 40px;
            margin: 0 auto;
        }

        .step {
            position: absolute;
            top: -7px;
        }

        /*首尾两部位置不变*/
        .step1 {
            left: 10% !important;
        }

        .nav>.step:last-child {
            left: 89% !important;
        }

        /*默认是待进行的图*/
        .dot {
            width: 26px;
            height: 26px;
            background: url("./img/todo.png") no-repeat;
            background-size: cover;
            z-index: 10;
            transform: translateX(-50%);
        }

        /*已完成*/
        .done {
            background: url("./img/done.png") no-repeat;
            background-size: cover;

        }

        /*正在进行*/
        .now {
            background: url("./img/now.png") no-repeat;
            background-size: cover;
        }


        .nav-title-item {
            font-size: 16px;
            transform: translateX(-50%);
        }

 function nav(list, step) {
            if (list.length < step) {
                console.log('------输入步骤有误！！------')
                return
            }
            let str = ''
            list.forEach((e, i) => {
                str += `
              <div class="step step${i + 1}">
                  <div class="dot ${i + 1 < step ? 'done' : (i + 1 === step ? 'now' : '')}"></div>
                  <div class="nav-title-item">${e}</div>
              </div>
`
            })
            let stepDom = `
                    <div class="nav">
                    <div class="nav-line"></div>${str}
                    
                    </div>
        `
            $('.nav-wrap').append(stepDom)
            //修改每一步的位置
            for (let i = 1; i < list.length + 1; i++) {
                console.log(i)
                let className = `.step${i}`
                //抛开头（left 10%）尾(left 89%)两个步骤，剩余的中间的步骤平分(89-10-1)，偏移量再加上头部的10%，这里需要自己画图理解一下
                $(className).css('left', (78 / (list.length - 1) * (i - 1)) + 10 + '%')
            }
            //修改进度条位置
            //当前位置的step的left
            if (step === list.length) {
                $('.nav-line').css('width', '100%')
                return
            }
            let nowLeft = $('.now').parent().css('left')
            $('.nav-line').css('width', nowLeft)
        }
        //调用，更改数组中的步骤，和当前所在步骤中的位置
        nav(['步骤1', '步骤2', '步骤3', '步骤4'], 3)

https://www.bootcdn.cn/jquery/ 调用jquery