進度條代碼

標籤：round   onload   int   span   percent   element   color   window   nbsp   

.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;        }

 

進度條代碼