这个进度条怎么做

我们系统在用户登录后加载了很多用户的信息以及系统的信息
所以在输入用户名和密码后点确定要等挺久才能看到我们系统的首页，
我想做个进度条显示，
，
主要是后台执行到哪步根本不清楚，系统采用的struts2，在登录后是一个action来处理用户的信息 以及加载一些别的系统信息，至于这个action执行到哪步了根本不知道思路不明 
请各位大虾帮忙给些意见

解决方案 »

  1.   

    ext,JQuery，都有这种进度条的，用起来也很简单
      

  2.   

    谢谢各位的解答，就是思路有点不明，比如文件上传，我可以利用ajax来获得已上传文件和总文件的百分比来设置进度条的百分比，但是这个登陆，后台没有参照物啊
      

  3.   

    只是登录，没必要用滚动条吧！用一个提示等待的就行了吗！用Ajax请求请求前：  var mask = new Ext.LoadMask(Ext.getBody(), {
                                  msg: '请等待........'
                     });
                     mask.show();请求成功： mask.hide();
      

  4.   

    用AJAX的框架很容易实现
    4.5  显示进度条无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。在代码清单4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，从而每隔2秒调用一次服务器。在processResult()方法中，只是从服务器查找已完成比例（百分数）的第一位数字，从而得出要将进度条中的哪些进度块着色（灰色）。代码清单4-9  progressBar.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>  <head>    <title>Ajax Progress Bar</title>    <script type="text/javascript">        var xmlHttp;        var key;        var bar_color = 'gray';        var span_id = "block";        var clear = "&nbsp;&nbsp;&nbsp;"         function createXMLHttpRequest() {            if (window.ActiveXObject) {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            }            else if (window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            }        }         function go() {            createXMLHttpRequest();            checkDiv();            var url = "ProgressBarServlet?task=create";            var button = document.getElementById("go");            button.disabled = true;            xmlHttp.open("GET", url, true);            xmlHttp.onreadystatechange = goCallback;            xmlHttp.send(null);        }         function goCallback() {            if (xmlHttp.readyState == 4) {                if (xmlHttp.status == 200) {                    setTimeout("pollServer()", 2000);                }            }        }         function pollServer() {            createXMLHttpRequest();            var url = "ProgressBarServlet?task=poll&key=" + key;            xmlHttp.open("GET", url, true);            xmlHttp.onreadystatechange = pollCallback;            xmlHttp.send(null);        }         function pollCallback() {            if (xmlHttp.readyState == 4) {                if (xmlHttp.status == 200) {                    var percent_complete =                           xmlHttp.responseXML                               .getElementsByTagName("percent")[0].firstChild.data;                     var index = processResult(percent_complete);                    for (var i = 1; i <= index; i++) {                        var elem = document.getElementById("block" + i);                        elem.innerHTML = clear;                         elem.style.backgroundColor = bar_color;                        var next_cell = i + 1;                        if (next_cell > index && next_cell <= 9) {                            document.getElementById("block" + next_cell)                                  .innerHTML =                                        percent_complete + "%";                        }                    }                    if (index < 9) {                        setTimeout("pollServer()", 2000);                    } else {                        document.getElementById("complete").innerHTML = "Complete!";                        document.getElementById("go").disabled = false;                    }                }            }        }         function processResult(percent_complete) {            var ind;            if (percent_complete.length == 1) {                ind = 1;            } else if (percent_complete.length == 2) {                ind = percent_complete.substring(0, 1);            } else {                ind = 9;            }            return ind;        }         function checkDiv() {            var progress_bar = document.getElementById("progressBar");            if (progress_bar.style.visibility == "visible") {                clearBar();                document.getElementById("complete").innerHTML = "";            } else {                progress_bar.style.visibility = "visible"            }        }         function clearBar() {            for (var i = 1; i < 10; i++) {                var elem = document.getElementById("block" + i);                elem.innerHTML = clear;                elem.style.backgroundColor = "white";            }        }     </script>  </head>  <body>    <h1>Ajax Progress Bar Example</h1>    Launch long-running process:           <input type="button" value="Launch" id="go" onclick="go();"/>    <p>    <table align="center">        <tbody>            <tr><td>                <div id="progressBar"                    style="padding:2px;border:solid black 2px;visibility:hidden">                    <span id="block1">&nbsp;&nbsp;&nbsp;</span>                    <span id="block2">&nbsp;&nbsp;&nbsp;</span>                    <span id="block3">&nbsp;&nbsp;&nbsp;</span>                    <span id="block4">&nbsp;&nbsp;&nbsp;</span>                    <span id="block5">&nbsp;&nbsp;&nbsp;</span>                    <span id="block6">&nbsp;&nbsp;&nbsp;</span>                    <span id="block7">&nbsp;&nbsp;&nbsp;</span>                    <span id="block8">&nbsp;&nbsp;&nbsp;</span>                    <span id="block9">&nbsp;&nbsp;&nbsp;</span>                </div>            </td></tr>            <tr><td align="center" id="complete"></td></tr>        </tbody>    </table>  </body></html>这个例子的服务器代码“模拟”了一个长时间运行的事务（见代码清单4-10）。在真实环境中，这期间可能还要同时创建多个新实例并注册，之前还需要客户发出请求。为简单起见，我们忽略了这点，也没有编写线程代码。代码清单4-10  ProgressBarServlet.javapackage ajaxbook.chap4; import java.io.*; import javax.servlet.*;import javax.servlet.http.*; public class ProgressBarServlet extends HttpServlet {    private int counter = 1;     /** Handles the HTTP <code>GET</code> method.     * @param request servlet request     * @param response servlet response     */    protected void doGet(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {        String task = request.getParameter("task");        String res = "";         if (task.equals("create")) {            res = "<key>1</key>";            counter = 1;        }        else {            String percent = "";            switch (counter) {                case 1: percent = "10"; break;                case 2: percent = "23"; break;                case 3: percent = "35"; break;                case 4: percent = "51"; break;                case 5: percent = "64"; break;                case 6: percent = "73"; break;                case 7: percent = "89"; break;                case 8: percent = "100"; break;            }            counter++;             res = "<percent>" + percent + "</percent>";        }        PrintWriter out = response.getWriter();        response.setContentType("text/xml");        response.setHeader("Cache-Control", "no-cache");        out.println("<response>");        out.println(res);        out.println("</response>");        out.close();    }}图4-10显示了实际工作中的进度条，图4-11显示了完成时的情况。图4-10  进度条示例图4-11  进度条完成
      

  5.   

    如果不是要等1分钟以上别做了，显示正在登陆就可以了！
    如果非要做可以用JQuery做
      

  6.   

    谢谢各位的回复，ext现在不是要收费了吗，后来弄了个gif图片