javascript进度条

function showProgressBar()
 {
  if( document.all('operatingFlagPanel') != null )
  {
   alert("当前的操作未完成，不能进行其他的操作！");
   return false;
  }
        var iStr ="";
      
       iStr += "<div id='operatingFlagPanel' style='position:absolute;height:12px;width:250px;z-index:9999'>\r\n"
              +  "  <marquee loop direction='right' title='装载中...' scrollamount='6' scrolldelay='100' style=\"cursor:'wait';border:1px solid ButtonShadow;background:#FFFFFF;height:30px;font-size:1px;margin:1px;width:300px;-moz-binding:url('marquee-binding.xml#marquee');-moz-box-sizing:border-box;display:block;overflow:hidden;\">\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=20);-moz-opacity:0.20;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=40);-moz-opacity:0.40;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=60);-moz-opacity:0.6;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=80);-moz-opacity:0.8;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "   <span style='height:26px;margin:1px;width:10px;left:200;top:100;background:#A062DF;float:left;font-size:1px;filter:alpha(opacity=100);-moz-opacity:1;'></span>\r\n"
              +  "  </marquee>\r\n"
              +  "</div>\r\n";

  document.body.insertAdjacentHTML("AfterBegin", iStr);
  sTop = document.body.scrollTop + 250 ;
        sLeft = document.body.offsetWidth/2 - 225 ;
        if( document.body.offsetHeight < 130 ) {
          document.all('operatingFlagPanel').style.height = 23;
          sTop = (document.body.offsetHeight-23)/2;
        }  
        if( document.body.offsetWidth < 300 ) {
          document.all('operatingFlagPanel').style.width = 150;
          sLeft = document.body.offsetWidth/2 - 75 ;
        }  
        document.all('operatingFlagPanel').style.pixelLeft = sLeft;
        document.all('operatingFlagPanel').style.pixelTop = sTop;
        document.all('operatingFlagPanel').style.display='';
        return true;
}

来源：https://www.cnblogs.com/dynasty/archive/2005/09/11/234587.html