.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 + "%");

    }