[JavaScript Code] 로딩 스피너 구현하기 (overlay)

<!-- 로딩 -->
<div id="fade" class="black_background"></div>
<div id="light" class="white_content">
	<img src="<%=request.getContextPath()%>/resources/image/loading.gif"
		style="width: 100px; height: 100px;"> <span
		style="margin: 0 0 0 10px;">진행 중입니다.</span>
</div>
<!-- 로딩 -->​

.black_background { 
    position: fixed; /* fixed를 사용하여 스크롤에 따라 따라다니지 않도록 합니다. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #666666 ;
    z-index:1;
    opacity:.50;
} 

.white_content { 
	display: none; 
	position: absolute; 
	padding: 16px; 
	width:350px; 
	border: 16px solid #E3F2FC; 
	background-color: white; 
	z-index:9999; 
	overflow: auto; 
}

function wrapWindowByMask() {
	/** 화면의 높이와 너비를 구한다. **/
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	/** 마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다. **/
	$('#fade').css({ 'width': maskWidth, 'height': maskHeight });

}

/// 화면의 중앙에 레이어띄움 
function showLayer() {
	wrapWindowByMask();

	$("#light").css("position", "absolute");
	$("#light").css("top", Math.max(0, (($(window).height() - $("#light").outerHeight()) / 2) + $(window).scrollTop() - 100) + "px");
	$("#light").css("left", Math.max(0, (($(window).width() - $("#light").outerWidth()) / 2) + $(window).scrollLeft()) + "px");
	$('#fade').show(); $('#light').show();
} 

function close() {
	$('#fade').hide(); $('#light').hide();
}