进度条

<style type="text/css">
        #container{
            width: 300px;
            height: 15px;
            margin:100px auto; 
            position:relative;
            background-color: #ccc;
            border-radius: 20px;

        }
        .red{
            width: 0;
            height: 15px;
            position:absolute;
            left:0;
            top:0;
            background-color: red; 
            transition: all 2s;
            font-size: 12px;
            text-align: right;
            border-radius: 20px;
        }
        
    </style>

<div id="container">
    <div class="red">
        <span></span>
    </div>
</div>

            //后台只需返回当前数和总数
            setInterval(function () { 
                setProgress(400,800)
            },500)
            //方法
            function setProgress(nowVal,allVal){
                // 计算百分比
                var precent=nowVal/allVal;
                var texts=Math.round(precent*100);
                //计算宽度
                var c_w=$("#container").width();
                var p_width=(c_w*precent)+'px';
                $(".red").css('width',p_width);
                $(".red span").html(texts+"%");
            }