javascript 로딩바css

간단한 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 함수는 빼고 다르게 사용해도 된다.