ext 로딩 효과

3520 단어 htmljspext

<style type="text/css"> 
  #loading-mask{ 
        position:absolute; 
        left:0; 
        top:0; 
        width:100%; 
        height:100%; 
        z-index:20000; 
        background-color:white; 
    } 
    #loading{ 
        position:absolute; 
        left:45%; 
        top:40%; 
        padding:2px; 
        z-index:20001; 
        height:auto; 
    } 
    
    #loading .loading-indicator{ 
        background:white; 
        color:#444; 
        font:bold 20px tahoma,arial,helvetica; 
        padding:10px; 
        margin:0; 
        height:auto; 
    } 
    #loading-msg { 
        font: normal 18px arial,tahoma,sans-serif; 
    } 
  </style> 

<!--   --> 
  <script type="text/javascript"> 
     Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}}); 
  </script> 


login.jsp : 
<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
  <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" /> 
  <style type="text/css"> 
  #loading-mask{ 
        position:absolute; 
        left:0; 
        top:0; 
        width:100%; 
        height:100%; 
        z-index:20000; 
        background-color:white; 
    } 
    #loading{ 
        position:absolute; 
        left:45%; 
        top:40%; 
        padding:2px; 
        z-index:20001; 
        height:auto; 
    } 
    
    #loading .loading-indicator{ 
        background:white; 
        color:#444; 
        font:bold 20px tahoma,arial,helvetica; 
        padding:10px; 
        margin:0; 
        height:auto; 
    } 
    #loading-msg { 
        font: normal 18px arial,tahoma,sans-serif; 
    } 
  
  
  </style> 
  </head> 
  <body> 
<!--   --> 
<div id="loading"> 
    <div class="loading-indicator"> 
      <img src="ext-2.1/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/> 
       <br/><span id="loading-msg">Loading ...</span> 
    </div> 
</div> 
  <!--   --> 
  <script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script> 
  <script type="text/javascript" src="ext-2.1/ext-all.js"></script> 
  <script type="text/javascript" src="login2.js"></script> 
  <!--   --> 
  <script type="text/javascript"> 
     Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}}); 
  </script> 
   <!--   -->  
<div id='wins'></div> 
<!--  --> 
</body> 
</html> 


좋은 웹페이지 즐겨찾기