三段色均分-实现像弹簧一样弹出的进度效果

之前只发布了js部分，有些小伙伴，还不能根据js推导出dom结构，故补全下：

思路：将目标div均分成三段，每段设置不同的背景色，根据所占百分比创建数量div用于分割

将创建的分割div，放在三段色容器中即可。

动画就是平移加缩放。

<div class="left-one-three-four">
                        <div>
                            <div class="four-text">学习人员</div>
                            <div class="four-right ">
                                <div class="percent-val" style="width: 80%">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="percent-text">80%</div>
                        </div>
                        <div>
                            <div class="four-text">管理人员</div>
                            <div class="four-right">
                                <div class="percent-val" style="width: 20%">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="percent-text">20%</div>
                        </div>
                        <div>
                            <div class="four-text">总人数</div>
                            <div class="four-right">
                                <div class="percent-val" style="width: 100%">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="percent-text">100%</div>
                        </div>
                    </div>

 setTimeout(() => {
        $('.left-one-three-four div.four-right').each(function (i) {
            let w = $(this).children('.percent-val').width()
            let p_w = $(this).width()
            let percent = (w / p_w) * 100
            let num = Math.floor(percent / 3)
            for (let i = 0; i < num; i++) {
                let div = document.createElement('div')
                div.style.width = '2px'
                div.style.height = "100%"
                div.style.marginRight = "2.8px"
                div.style.background = "black"
                div.style.border = "1px solid black"
                $(this).children().children().append(div)
            }
            $(this).find(('.percent-val')).children().eq(0).css({background: '#0069ff'})
            $(this).find('.percent-val').children().eq(1).css({background: '#00decf'})
            $(this).find('.percent-val').children().eq(2).css({background: '#e9af06'})
        })
    }, 500)

.percent-val {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: center;
                height: .vh(8)[@return];
                overflow: hidden;
                animation: site_translate 5s;
              }

@keyframes site_translate
{
  from {
    transform: translateX(-100%) scaleX(0.1);
  }
  to {
    transform: translateX(0%) scaleX(1);
  }
}

效果：