웹 페이지에서 프로그레스 써클 띄우기

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

<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>