[JavaScript] 자바스크립트 로딩 표시 만들기

로딩 창 키는 함수

jQuery를 이용해 마스크와 로딩 이미지 삽입.

// 로딩창 키는 함수
function openLoading() {
    //화면 높이와 너비를 구합니다.
    let maskHeight = $(document).height();
    let maskWidth = window.document.body.clientWidth;
    //출력할 마스크를 설정해준다.
    let mask ="<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
    // 로딩 이미지 주소 및 옵션
    let loadingImg ='';
    loadingImg += "<div id='loadingImg' style='position:absolute; top: calc(50% - (200px / 2)); width:100%; z-index:99999999;'>";
    loadingImg += " <img src='https://loadingapng.com/animation.php?image=4&fore_color=000000&back_color=FFFFFF&size=128x128&transparency=1&image_type=0&uncacher=75.5975991029623' style='position: relative; display: block; margin: 0px auto;'/>";
    loadingImg += "</div>"; 
    //레이어 추가
    $('body')
    		.append(mask)
    		.append(loadingImg)
    //마스크의 높이와 너비로 전체 화면을 채운다.
    $('#mask').css({
            'width' : maskWidth,
            'height': maskHeight,
            'opacity' :'0.3'
    });
    //마스크 표시
    $('#mask').show();  
    //로딩 이미지 표시
    $('#loadingImg').show();
}

 

로딩 창 끄는 함수

jQuery를 이용해 마스크, 로딩 이미지 제거.

// 로딩창 끄는 함수
function closeLoading() {
    $('#mask, #loadingImg').hide();
    $('#mask, #loadingImg').empty(); 
}

 

예제

실제 사용은 로딩 창 열기 - 작업 할 프로세스 실행 - 완료 - 로딩 창 닫기.

예제는 간단히 하기 위해 setTimeout 사용.

 

 

See the Pen loading process by Kim Jae Ik (@doitdoik) on CodePen.