반응형
간단한 css로 만든 로딩바
javascript부분
function loading_bar_start(callback){
let maskHeight = $(document).height();
let maskWidth = window.document.body.clientWidth;
let mask = "<div id='mask' style='position:absolute; z-index:9997; background-color :#000000; display:none; left:0; top:0;'></div>";
let loadingImg = '';
let loadingLocationX = maskWidth/2 - 100; //화면 중앙에 로딩이미지 띄우기위한 x,y
let loadingLocationY = maskHeight/2 - 100; //이미지 크기에따라 -100 부분조절(테스트했던 이미지가 200*200 이라서 -100)
loadingImg += ` <div class='loader' style='position:absolute; z-index:9998; text-align:center; display:block; margin-top:${loadingLocationY}px; margin-left:${loadingLocationX}px;'>`;
loadingImg += " </div>";
$('body').append(mask);
$("#mask").css({
'width' : '100%',
'height' : '100%',
'opacity' : '0.5'
});
//mask에 세팅한 loading div를 append 후 show
$('#mask').append(loadingImg);
$("#mask").show();
//마스크 적용을 위해 settimeout으로 동기적으로 실행하기
setTimeout(function() {
// 콜백 함수 호출
callback();
}, 10);
}
function loading_bar_end(){
$('#mask').hide();
$('#mask').remove();
}
css부분
<style>
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
callback 함수는 빼고 다르게 사용해도 된다.
반응형
'자바스크립트(jquery)' 카테고리의 다른 글
javascript input 데이터 post 전송 제한 (0) | 2024.04.26 |
---|---|
javascript 세션 유지 로그인 문제 (0) | 2024.03.23 |
javascript undefined, null 체크 (0) | 2024.03.23 |
jquery 다량의 배열 post (0) | 2024.03.22 |
체크박스 전체선택 및 선택삭제 (0) | 2024.03.22 |