如何让Gmail像加载进度条一样

2024-05-18

我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条, 并适用于所有浏览器


这是基本代码

<!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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让Gmail像加载进度条一样 的相关文章

随机推荐