[Javascript] 로딩바 만들기

안녕하세요~! 오늘의 포스팅에서는 간단한 로딩바를 만들어 주는 방법을 알아보겠습니다.

 

웹 사이트나 모바일 화면에서 무언가 데이터 처리를 할 때 화면 중앙에 빙글빙글 돌아가는걸 다들 본 적이 있을겁니다.

이렇게 생긴 녀석인데요, 오늘은 바로 이녀석을 화면 중앙에서 돌아가게 만들겠습니다.

 

원리는 아주 간단합니다.

 

무언가 동작이 걸릴 때, 화면을 클릭하지 못 하도록 막아놓고, 가운데에 저 이미지를 띄우면 끝입니다.

 

예를 들어 게시판에 올릴 글을 입력하고 확인버튼을 눌렀는데, 로딩바가 뜨지 않는다면 확인버튼을 계속 누를수 있겠죠?

 

확인버튼을 여러번 누른다면 에러가 발생할 지도 모르니 애초에 그렇게 하지 못하도록 막아버리는 겁니다.

 

자 그럼 코드를 살펴 보겠습니다.

#back{
    position: absolute;
    z-index: 100;
    background-color: #000000;
    display:none;
    left:0;
    top:0;
}

#loadingBar{
    position:absolute;
    left:50%;
    top: 40%;
    display:none;
    z-index:200;
}

일단 스타일 시트를 만들어 주겠습니다. 아래를 보면 이 css가 뭔지 알게 되실 겁니다.

 

function FunLoadingBarStart() {
    var backHeight = $(document).height();               	//뒷 배경의 상하 폭
    var backWidth = window.document.body.clientWidth;		//뒷 배경의 좌우 폭

    var backGroundCover = "<div id='back'></div>";			//뒷 배경을 감쌀 커버
    var loadingBarImage = '';								//가운데 띄워 줄 이미지

    loadingBarImage += "<div id='loadingBar'>";
    loadingBarImage += "     <img src='../img/loadingbar.gif'/>"; //로딩 바 이미지
    loadingBarImage += "</div>";

    $('body').append(backGroundCover).append(loadingBarImage); 

    $('#back').css({ 'width': backWidth, 'height': backHeight, 'opacity': '0.3' });
    $('#back').show(); 
    $('#loadingBar').show();
}

 

로딩바를 띄워 줄 스크립트입니다. 

 

로딩 바를 띄워줬으면 처리가 끝나고 로딩 바를 없애줄 스크립트 함수도 필요하겠죠?

function FunLoadingBarEnd() {
    $('#back, #loadingBar').hide();
    $('#back, #loadingBar').remove();
}

간단하게 만들어 주겠습니다.

 

이렇게 해서 공통 js파일에 담아두고 페이지 어디서든 호출해서 쓰면 아주 편리합니다.

 

사용 예시를 한번 들어보겠습니다.

var ajaxUrl = xxxx/xxxx.do;  //예시
var inputData = {
	xxx:xxx,
    yyy:yyy
}
$.ajax({
            type: 'POST'
            , url: ajaxUrl
            , data: JSON.stringify(inputData)
            , contentType: 'application/json; charset=utf-8'
            , dataType: 'json'
            , beforeSend: function () {
                FunLoadingBarStart();      	//로딩바 생성
            }
            , complete: function () {
                FunLoadingBarEnd();			//로딩바 제거
            }
            , success: function (msg) {
                alert("성공")
            }
            , error: function (xhr, status, error) {
                alert("code : " + xhr.status + "\r\nmessage : " + xhr.responseText);
            }
        });

 

ajax 통신을 할 때 명령을 시작하기 전에 로딩 바를 생성하고 처리가 완료 되면 로딩바를 없애주는 ajax 통신 함수입니다.

 

다른건 신경 쓸 필요가 없고 오늘의 포스팅 주제는 로딩바를 만드는 것이기 때문에

 

로딩바가 언제 생성되고 없어지는지만 보시면 되겠습니다.

 

이렇게 해서 아주 간단하게 로딩 바를 만들어 보았습니다.