카테고리 보관물: CSS

Ajax 로딩 이미지 구현

<style type=”text/css”>
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url(‘/html/script/js/jquery/jquery-easyui-1.4.4/theme/default/images/loading.gif’) 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
</style>

$(document).ready(function() {
//loading bar
$(document).ajaxStart(function() {
$(“body”).addClass(“loading”);
});

$(document).ajaxStop(function() {
$(“body”).removeClass(“loading”);
});
});