Home/ Questions/Q 1008063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:42:45+00:00

I want create a loading progress bar like Gmail in center and top of

  • 0

I want create a loading progress bar like Gmail in center and top of the page,
and work in all browsers

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0