<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        body
        {
            padding: 20px;
            font-size: 14px;
        }
        #progressbar
        {
            width: 278px;
        }
        #progressbar .border
        {
            border: 1px solid #777;
            width: 276px;
            height: 13px;
            padding: 1px;
        }
        #progressbar .bar
        {
            background-color: #73c944;
            width: 50%;
            height: 13px;
            overflow: hidden;
        }
        #progressbar .desc
        {
            text-align: center;
            font-size: 12px;
            line-height: 24px;
        }
    </style>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
     var loading = function(){
     var ct = $("#progressbar");
     var desc=$("#desc");
     var bar = $("#bar");
     var idx = 0;
     var time = 500;
     bar.setValue = function(n){
         $("#bar").css({"width":n + "%"});

        };
     void function(){
         bar.setValue(idx += (100 - idx) *.2);
         timer = setTimeout(arguments.callee, time += 100);
         }();
      return {
             remove: function(){
                 clearTimeout(timer);
                $("#desc").html("加载完成");
                 bar.setValue(100);
                 }
             };
     }();
    setTimeout(loading.remove, 10000);
    </script>

</head>
<body>
    <div id="progressbar">
        <div class="border" id="border">
            <div class="bar" style="width: 36px; background-color: Green" id="bar">
            </div>
            <div class="desc" id="desc">
                正在加载</div>
        </div>
    </div>
</body>
</html>