How to make Gmail like loading progress bar_问答_开发者

How to make Gmail like loading progress bar

开发者 https://www.devze.com 2023-01-02 17:50 出处：网络

I want create a loading progress bar like Gmail in center and top of the p开发者_高级运维age,

I want create a loading progress bar like Gmail in center and top of the p开发者_高级运维age, and work in all browsers

this is basic code

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
        <style>
            body{
                margin:0px;
            }
            #state{
                width:100px;
                height:30px;
                background:#FEE27C;
                position:fixed !important; 
                position:absolute /* fallback for IE6 */;
            }
        </style>
        <script language=javascript type='text/javascript' >
            function set(){
                var s = screen_now_size();
                margin_right = (s['width']-100)/2;

                //append or change margin right size
                var state_layer = document.getElementById("state");
                state_layer.style.right      = margin_right+"px"
            }

            function screen_now_size(){ // get screen current size
                var a=new Array();
                if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
                  a["width"]=document.documentElement.clientWidth;
                  a["height"]=document.documentElement.scrollTop+document.body.clientHeight;
                }else{
                  a["width"]=document.body.clientWidth;
                  a["height"]=document.body.scrollTop+document.documentElement.clientHeight;
                  }
                return a;
            }
        </script>
    </head>
    <body onload='set()'>
        <div id='state'></div>
        <!--for test:-->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        for test
    </body>
    </html>

You can use the jQuery UI Progressbar plugin. As your page loads the data it needs, update the value of the progress bar.

You sir need to use $(document).ajaxStart() and $(document).ajaxStop() to achieve that with jQuery.

http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/

This might be not exactly what your looking for, but it will help you get started: http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

You will need to use a mix of jQueryUI ProgressBar and jQuery FancyBox which can hold content (like a progressbar).