2021.03.25
10일차
입사 18일차.
22일부터 약 3일간 블로그를 쉬어서 그 동안 못올린 내용들은 한 번에 올린다.
프로그래스 바는 사실 html5에서 지원하는 <dialog>태그를 사용하면 쉽게 만들 수 있다.
하지만, <dialog>태그는 safari, IE 등 몇가지 브라우저를 지원하지 않아서 <div>태그를 사용하는 것이 좋다.
사실 오늘 <dialog>태그로 만들었다가 다시 만들었다.
까다로웠던 점은
로딩이미지 뒤에 화면은 Fix해서 스크롤을 이동해서 늘 Image가 가운데 있어야 하는 점이었다.
답은 position : fixed style을 사용하는 것이다.
1. 프로그래스 바 body 만들어주기
① var progressBody
= "<div id='divProgressBar' style='width:100%; height:100%, top:0px; left:0px; position:fixed; display:block; background-color:rgba(0, 0, 0, 0.7); z-index:99;'>"
+ "<div id='divProgressImg' style='width:100%; height:100%; display:flex; justify-content:center; align-items:center;'></div>"
+ "</div>"
② function으로 만들어서 common.js에 스크립트를 작성하고, 필요할때마다 호출해서 사용하는 것이 알맞는 기능이기 때문에 js로 만들었다.
③ flex를 사용하여 정가운데에 위치하도록 style을 설정해줬다.
2. 이미지 경로 및 style 설정하기
① var progressImg
= <img src='"+ 경로 +"' style='position: absolute; left:50%; z-index:100; border-radius:50%'/>";
② 로딩 중 이미지의 위치를 조정해준다.
3. 생성한 태그들을 body에 붙여준다.
① document.body.appendChild(progressBody);
② divProgressImg.appendChild(progressImg);
4. 코드
function fn_showProgressBar() { // 프로그래스 바 불러오기 loadingProgressBar( 경로 ); // 프로그래스 바 종료 및 body에서 삭제, 시간은 5초로 지정 ( ms가 단위 ) setTimeout( "closeProgressBar()", 5000 ) } function loadingProgressBar( 경로 ) { // 프로그래스 바 Body 생성 var progressBody = "<div id='divProgressBar' style='width:100%; height:100%, top:0px; left:0px; position:fixed; display:block; background-color:rgba(0, 0, 0, 0.7); z-index:99;'>" + "<div id='divProgressImg' style='width:100%; height:100%; display:flex; justify-content:center; align- items:center;'></div>" + "</div>" // 이미지경로 및 Style 설정 var progressImg = "<img src="'+ 경로 +'" style='position: absolute; left:50%; z-index:100; border-radius:50%'/>"; // 생성한 태그들을 붙여준다. document.body.appendChild(progressBody); divProgressImg.appendChild(progressImg); } // setTimeout에 설정한 시간이 지나면 프로그래스 바 태그안의 내용들을 삭제한다. function closeProgressBar() { $("#divProgressBar, #ProgressImg").hide(); $("#divProgressBar, #ProgressImg").empty(); } |
<div> 태그를 사용했기 때문에 브라우저 버전이나 호환성에 대해 생각하지 않아도 되는 프로그래스 바를 만들 수 있다.
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
[FE/JS] JavaScript ES6 문법정리2 (0) | 2021.04.01 |
---|---|
[FE/JS] form태그의 자동 Keyup 이벤트 (submit) 막기 (0) | 2021.03.26 |
[FE/JS] 동적 form 생성해서 POST method로 전달하기 (1) | 2021.03.25 |
[FE/JS] JavaScript 문법정리2 ( ~ ES5 ) (0) | 2021.03.20 |
[FE/JS] JavaScript ES6 문법정리 (0) | 2021.03.15 |
댓글