[java] 화면이 로딩중일때 프로그래스 처리

위 프로그래스바를 이용하여 화면에서의 로딩 동작을 표현해 보았다.

 

 

1. 클래스 명 으로 css 속성 부여

.wrap-loading {
	position : fixed;
	left : 0;
	right : 0;
	top : 0;
	bottom : 0;
	background : rgba(0,0,0,0.2);
	filter : progid:DXImageTransform.Microsoft.Gradient
    (startColorstr='#20000000',endColorstr='#20000000');
}

.wrap-loading div{
	position : fixed;
	top : 50% ;
	left : 50%;
	margin-left : -21px;
	margin-top : -21px;
}

.display-none{
	display:none;
}



2. 화면에 로딩중 이미지 표현

<div class=”wrap-loading”>
	<div><img src=”경로/ajax-loader.gif”/></div>
</div>



3. 자바 스크립트 단

$(document).ready(function () {
	// 화면에 로딩중 이미지 숨기기 
	$('.wrap-loading').addClass('display-none');
    
	// 조회or검색 버튼 클릭시
	$("#btnSearch").click(function (event) {
		(~ 코드 구현 ~)
        
		// 화면에 로딩중 이미지 보여주기
		$('.wrap-loading').removeClass('display-none');
	}

}