进度条(报名,活动进度条)

话不多说上效果图 (根据比例算出进度)

Ps : 代码乱差,能手写出来不错了

    //目前兼容移动端
	<div class="yyds">
			//提示当前已>已预约多少人
            <div class="Bo_Tips">已预约<span class="Tips_text"></span><b></b>人</div>
    </div>
    <div class="Box">
        <div class="Pro">
        	//圆点+文字
            <span class="yuan_g  progress ">
                <p class="Pro_ziero">0</p>
            </span>
            <span class="yuan_g progress_50">
                <p class="Pro_ziero_50">500</p>
            </span>
            <span class="yuan_g progress_100">
                <p class="Pro_ziero_100">1000</p>
            </span>
            
            //增长的进度条
            <div class="Bo"></div>
        </div>
    </div>

Css代码

body {
    padding-top: 10rem;
}

.yyds {
    width: 85%;
    height: .5rem;
    position: relative;
    padding: 0% 7.5%;
}

/* 盒子 */
.Box {
    width: 85%;
    height: 1rem;
    margin: 0 auto;
}

/* 所有圆点的宽高颜色 */
.yuan_g {
    width: .3rem;
    height: .3rem;
    border-radius: .3rem;
    background-color: #ccc;
}

/* 总进度条 */
.Pro {
    width: 100%;
    height: .1rem;
    background-color: #ccc;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
}

/* 进度条 */
.Bo {
    width: 0%;
    height: .1rem;
    margin: 0 auto;
    border-radius: 1rem;
    background-color: #FFBE00;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}

/* 开始圆点 */
.progress {
    position: absolute;
    top: -71%;
    left: -3%;
}

/* 开始的文字 */
.Pro_ziero {
    width: 1.6rem;
    position: absolute;
    top: 130%;
    left: 0%;
    font-size: .1rem;
}

/* 一半的圆点 */
.progress_50 {
    background-color: #ccc;
    position: absolute;
    top: -71%;
    left: 48%;
    z-index: 999;
}

/* 一半的文字 */
.Pro_ziero_50 {
    width: 2.6rem;
    position: absolute;
    top: 130%;
    font-size: .1rem;
}

/* 末尾的圆点 */
.progress_100 {
    background-color: #ccc;
    position: absolute;
    top: -71%;
    right: -3%;
}

/* 末尾文字定位 */
.Pro_ziero_100 {
    width: 3rem;
    position: absolute;
    top: 130%;
    font-size: .1rem;
}

/* 已报名户 */
.Bo_Tips {
    width: 1.5rem;
    height: .5rem;
    border-radius: .5rem;
    position: absolute;
    top: -38%;
    left: -5%;
    background-color: #FFBE00;
    font-size: .1rem;
    color: rgb(0, 0, 0);
    position: relative;
    text-align: center;
    line-height: .5rem;
    display: none;
    color: cornsilk;
}
/*小三角形*/
.Bo_Tips b {
    position: absolute;
    top: 97%;
    left: 12%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #FFBE00;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

Js代码

//Html文字大小 一个rem多少px
(function () {
    var docEl = document.documentElement;
    var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var setRem = function () {
        var screenWidth = docEl.clientWidth || window.screen.width || 360;
        if (screenWidth > 800) {
            docEl.style.fontSize = (100 * screenWidth / 1920) + 'px';
        } else {
            docEl.style.fontSize = (100 * screenWidth / 800) + 'px';
        }
    };

    window.addEventListener('resize', setRem, false);
    setRem();

})();
window.onload = function () {
    // ===============================================
    // 进度条进度   (设置进度条进度)
    var speed = 500;
    // ===============================================
    // 获取屏幕尺寸
    var windowWidth = window.screen.width;
    // 获取已报名宽度
    var Bo_Tips = $('.Bo_Tips').width();
    // 进度条宽度
    var Bo = $('.Bo').width();
    // 总进度宽度
    var width = $('.Pro').width();
    // 文字显示
    var zieo = 0;
    // 文字最后
    var newSpeed = speed;
    // 最大的数量
    let max = $('.Pro_ziero_100').html();
    //比例计算  100/(Html最大文字的数量)      进度是百分比的进度
    let min = speed * (100 / max);
    
    if (min == 100) {
    	//手机尺寸小,缩小提示的宽度以免超出
        $('.Bo_Tips').css({
            width: 1 + 'rem',
        }).html('已爆满');
    } else {
        // 文字从零到指定数字 (有一个视觉效果)
        var timerHtml = setInterval(function () {
            $('.Tips_text').html(zieo++);
            if (zieo >= newSpeed) {
                $('.yyds .Bo_Tips .Tips_text').html(speed);
                clearInterval(timerHtml);
            }
        }, 10)
    }

    //执行进度 到某点某点颜色改变    
    var timer = setInterval(function () {
        // 当前的进度条
        var Bo = $('.Bo').width();
        // 总进度除以二
        let bag = width / 2;
        if (Bo >= bag) {
        	//百分之五十时候中间的圆点变色
            $('.progress_50').css({ 'background-color': '#FFBE00' });
        } if (Bo == width) {
        	//同理百分百编写
            $('.progress_100').css({ 'background-color': '#FFBE00' });
        } if (Bo == 0) {
        	// 0的话上面提示不显示
            $('.Bo_Tips').hide();
        } else {
            $('.Bo_Tips').show();
        }
    })
    // 延时一次性定时器
    setTimeout(function () {
        // 修改颜色
        $('.progress').css({ 'background-color': '#FFBE00' });
        // 执行根据进度条执行上面的文字
        setTimeout(function () {
            // 判断设备   
            // (啊这里为什么要判断呢, 一.可能是本人菜, 二.因为定位的原因导致提示比进度条多百分之几)  
            if (windowWidth <= 280) {
                $('.Bo_Tips').show().animate({
                    left: min - 5 + '%',
                }, 3000)
            } else if (windowWidth <= 414) {
                if (speed < 10) {
                    $('.Bo_Tips').show().animate({
                        left: min - 4 + '%',
                    }, 3000)
                } else {
                    $('.Bo_Tips').show().animate({
                        left: min - 4 + '%',
                    }, 3000)
                }
            } else if (windowWidth <= 768) {
                $('.Bo_Tips').show().animate({
                    left: min - 2 + '%',
                }, 3000)
            } else if (windowWidth <= 1920) {
                $('.Bo_Tips').show().animate({
                    left: min - 1 + '%',
                }, 3000)
            } else {
                $('.Bo_Tips').show().animate({
                    left: min + '%',
                }, 3000)
            }
            // 执行进度条进度
            $('.Bo').show().animate({
                width: min + '%',
                height: ".1rem",
            }, 3000)
        })
    }, 1000)
    // 清除定时器
    setTimeout(function () {
        clearInterval(timer);
    }, 6000);
}

自己开发,如遇Bug过更好的编写方法, 欢迎指教, 另外加油, 奥里给!!