.graph { width: 400px; height: 25px; border: 1px solid #f8b3d0; }.bar { background-color: #ffe7f4; display: block; float: left; height: 100%; text-align: center; }

<div class="fz">    <div class="graph" id="graph">        <em id="bar" class="bar"></em>    </div>    <input type="button" value="加载" id="btn">    <em id="mes"></em></div>

$("#btn").bind("click", function () {        startLoading();    })    var xmlHttp;    var percent;    function createXMLHttpRequest() {        if (window.ActiveXObject) {            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }        else if (window.XMLHttpRequest) {            xmlHttp = new XMLHttpRequest();        }    }    function startLoading() {        createXMLHttpRequest();        var url = "data.txt";        xmlHttp.open("GET", url, true);        xmlHttp.onreadystatechange = function () {            if (xmlHttp.readyState == 4) {                if (xmlHttp.status == 200) {                    setTimeout("sendData()", 2000);                }            }        };        xmlHttp.send(null);    }    function sendData() {        createXMLHttpRequest();        var url = "data.txt";        xmlHttp.open("GET", url, true);        xmlHttp.onreadystatechange = function () {            if (xmlHttp.readyState == 4) {                if (xmlHttp.status == 200) {                    percent = parseInt(xmlHttp.responseText);                    refreshBar(percent);                    if (percent < 100) {                        setTimeout("sendData()", 2000);                    }                    else {                        $("#mes").html("加载完毕");                        //隐藏操作                    }                }            }        }        xmlHttp.send(null);    }    //更新进度条    function refreshBar(per) {        $("#bar").width(per + "%");    }