[FE/JS] 프로그래스 바 div 태그로 만들기

    728x90
    반응형

    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> 태그를 사용했기 때문에 브라우저 버전이나 호환성에 대해 생각하지 않아도 되는 프로그래스 바를 만들 수 있다.

    728x90
    반응형

    댓글