[JS] gif 이미지를 이용한 투명 로딩바, 로딩서클 만들기 [loading bar, loading circle 만들기, 스크롤 고정하는 방법]

---

- gif 이미지를 이용한 로딩바, 로딩서클 만들기

데이터를 처리할 때 화면에 표시되는 로딩바, 로딩서클을 만들어보려 한다. 두 개의 함수만 구현하면 되기에 꽤나 간단하다. (아래 코드는 jQuery로 구현해놓았기에 cdnjs에서 jQuery를 받아와야 한다.)

---

[jQuery] 제이쿼리(jQuery)란? [cdnjs에서 HTML로 jQuery 불러오기]

[꿀팁] 투명 로딩바, 로딩서클 이미지 무료 사이트 [GIFER, 투명 배경 gif 사이트]

---

- 로딩 이미지 생성 / createLoadingImage()

function createLoadingImage() {
    document.body.style.overflow = 'hidden'; // 스크롤 고정

    // 로딩 이미지에 대한 스타일 지정
    const backGroundStyle = `position: absolute; z-index: 2000; background-color: #000000; display:none; left:0; top:0;`;
    const loadingStyle = `position:absolute; left:45%; top:2%; display:none; z-index:3000;`;

    // 배경 div
    let backGroundCover = "<div id='back' style='" + backGroundStyle + "'></div>";
    
    // 로딩 이미지 div
    let loadingImage = '';
    loadingImage += "<div id='loadingBar' style='" + loadingStyle + "'>";
    loadingImage += "     <img style='width:30%;' src='로딩 이미지 경로'/>";
    loadingImage += "</div>";
 
    // body에 추가
    $('body').append(backGroundCover).append(loadingImage); 
    
    // css 적용 및 보이기
    $('#back').css({ 'width': window.document.body.clientWidth, 'height': $(document).height(), 'opacity': '0.3' });
    $('#back').show();
    $('#loadingBar').show();
}

---

- 로딩 이미지 제거 / removeLoadingImage()

function removeLoadingImage() {
    document.body.style.overflow = 'auto'; // 스크롤 고정 해제
    
    // 배경, 로딩 이미지 제거
    $('#back, #loadingBar').hide();
    $('#back, #loadingBar').remove();
}

 

이 두 함수를 아래와 같이 로직의 시작과 끝에 배치를 하면 로딩 이미지가 생성된다.

function test() {
    createLoadingImage(); // 로딩 이미지 생성
    /* 데이터 처리 로직 구현 */
    removeLoadingImage(); // 로딩 이미지 제거
}

 

---

 

로딩서클 구현 완료

---

- 참고자료

[Javascript] 로딩바 만들기

---