특정 웹 페이지 로딩시 프로그레서 바/프로그레스 써클 띄워야 할 경우가 있다면 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>
'HTML' 카테고리의 다른 글
| dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기 (0) | 2020.10.29 |
|---|---|
| HTML의 col 태그에 대해서 (0) | 2018.08.31 |
| 크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기) (0) | 2018.08.22 |
| textarea 내용을 초기화 하는 법 (0) | 2018.06.11 |
| HTML 링크를 새 창에서 열기 (0) | 2015.10.26 |