jquery 조회 로딩 바(Loading bar) 적용

로딩바 이미지

 

로딩바 부분

<!--로딩바-->
<div class="modal" style="display:none">
	<div class="center">
		<img alt="" src="img.gif" />
	</div>	
</div>

 

CSS 부분

.modal { 
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: Black;
    filter: alpha(opacity=60); 
    opacity: 0.6;
    -moz-opacity: 0.8;
}
.center { 
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    background-color: none;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
} 
.center img { 
    height: 128px;
    width: 128px; 
}

 

jquery 부분

$("#search").click(function(){
    $.ajaxSetup({
        beforeSend : function(){ $(".modal").show(); }
        ,complete : function(){ $(".modal").hide(); }
        ,error : function(){ $(".modal").hide(); }
    });

    $.ajax({
        type : "post",
        url : "/search/getList",
        data : jsonData,
        async : true,
        success : function(result){
            // 성공 시 로직
        },
        error : function(request, status, error){
            // 에러 시 로직
        }
    });
});