특정 웹 페이지 로딩시 프로그레서 바/프로그레스 써클 띄워야 할 경우가 있다면 dialog 태그와 img 태그와 로딩 이미지를 보여주는 gif 이미지를 적절히 조합하여 로딩 상태를 띄워줄수가 있다. 
아래는 코드이다.

<html>
<head>
	<title>프로그레스 써클 띄우기</title>
	<style>

	</style>
</head>
<body>
	<br/>
	<button onclick="showProCircle()" style="padding: 5px;"> 프로그레스 써클 띄우기 </button><br/>
	<h3> 5초 후에 자동으로 닫힙니다. </h3>

	<div>
		<!-- dialog 태그를 border-radius 속성을 이용해서 원형으로 만들고 gif 이미지도 동일하게 원형으로 만든다 -->
		<dialog id="progressCircleDialog" style="width:200px; height:200px; padding:-5px; background-color:#ffffff; border: 0px solid black; border-radius: 50%;">
			<img style="width: 100%; height: 100%; display: block; margin: 0px auto; padding: 0px; border-radius: 50%;" src="loading.gif">
		</dialog>
	</div>
	<script>
		function showProCircle(){
			var dialog = document.getElementById("progressCircleDialog");
			dialog.showModal();

			setTimeout(function(){
				dialog.close();
			}, 5000);
		}
	</script>
</body>
</html>

+ Recent posts