效果图

image.png

image.png

image.png

image.png

引用js

<script src="js/jquery.min.js"></script>

样式css

 .loaderContainer {
            margin: 0 auto;
            margin-top: 100px;
            border: 1px solid #ddd;
            width: 300px;
            height: 25px;
            line-height: 25px;
            position: relative;
            box-sizing: border-box;
        }
        
        .backRow {
            position: absolute;
            top: -16px;
            left: 0;
            width: 0;
            height: 100%;
            z-index: -1;
        }
        
        .loaderContainer div {
            width: 33.333333%;
            float: left;
            text-align: center;
            overflow: hidden;
            position: relative;
        }
        
        .step1 {
            width: 33.333333%;
            background: yellow;
        }
        
        .step2 {
            width: 66.666666%;
            background: -webkit-linear-gradient(left, yellow, orange);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(left, yellow, orange);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(left, yellow, orange);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(left, yellow, orange);
            /* 标准的语法 */
        }
        
        .step3 {
            width: 100%;
            background: -webkit-linear-gradient(left, yellow, orange, red);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(left, yellow, orange, red);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(left, yellow, orange, red);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(left, yellow, orange, red);
            /* 标准的语法 */
        }
        
        .loaderContainer div::after {
            position: absolute;
            right: 0;
            top: -1px;
            width: 1px;
            content: '';
            border-right: 1px solid #ddd;
            height: 100%;
        }
        
        .loaderContainer div:nth-child(4):after {
            border: none;
        }

html

<div class="loaderContainer">
        <p class="backRow">
        </p>
        <div>低</div>
        <div>中</div>
        <div>高</div>

    </div>

自定义js

 $(".loaderContainer").on('click', 'div', function() {
            var clickTxt = $(this).text();
            if (clickTxt == '低') {
                if ($(".backRow").hasClass("step2")) {
                    $(".backRow").removeClass("step2");
                };
                if ($(".backRow").hasClass("step3")) {
                    $(".backRow").removeClass("step3");
                };
                $(".backRow").addClass('step1');
            } else if (clickTxt == '中') {
                if ($(".backRow").hasClass('step1')) {
                    $(".backRow").removeClass('step1');
                };
                if ($(".backRow").hasClass('step3')) {
                    $(".backRow").removeClass('step3');
                };
                $(".backRow").addClass('step2');
            } else if (clickTxt == '高') {
                if ($(".backRow").hasClass('step2')) {
                    $(".backRow").removeClass('step2');
                };
                if ($(".backRow").hasClass('step1')) {
                    $(".backRow").removeClass('step1');
                };
                $(".backRow").addClass('step3');
            }
        });

本文为原创，如转载请标明原作者，谢谢阅读！（技术小菜，欢迎前来学习、指导。）