进度条代码

Posted 2021-01-13 ouchen0312

.total {
            margin: 100px;
            width: 300px;
            height: 5px;
            background: #e5e3e4;
            position: relative;
        }
        .percent {
            position: relative;
            float: left;
            height: 5px;
            background: -webkit-linear-gradient(left, #fed023, #fa2a5c);
            background: -o-linear-gradient(left, #fed023, #fa2a5c);
            background: -moz-linear-gradient(left, #fed023, #fa2a5c);
            background: linear-gradient(to right, #fed023, #fa2a5c);
        }
        
        .percent:after {
            content: ‘‘;
            position: absolute;
            right: -9px;
            top: -2px;
            width: 6px;
            height: 6px;
            border: 2px solid #fa2a5c;
            background: #fff;
            border-radius: 50%;
        }
        .per-number{
            position: absolute;
            right: -60px;
            top: -10px;
            font-size: 18px;
            color: #fa0a13;
            font-style: oblique;
        }

<div class="total">
            <div class="percent" id="processbar" style="width: 0%;"></div>
            <div class="per-number" id="number"></div>
        </div>

function setProcess(percent) {
            var processbar = document.getElementById("processbar");
            var num = document.getElementById("number");
            processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
            num.innerhtml = processbar.style.width;
            if(processbar.style.width == percent) {
                window.clearInterval(bartimer);
            }
        }
        
        var bartimer = window.setInterval(function() {
            setProcess("66%");
        }, 10);
        window.onload = function() {
            bartimer;
        }