[웹디자인] 로딩 오버레이 Loading.js

웹사이트를 제작하다 보면 사용자의 요청을 처리하는 동안

사람들의 조작을 잠시 막아둘 필요가 있을 때가 종종 찾아옵니다.

 

그럴 때 페이지마다 오버레이용 CSS를 만들어두거나 각 컨트롤러에 readonly를 걸어두는 등 복잡한 일을 하죠.

 

이번에 소개해드릴 loading.js는 로딩 중이라는 표시를 보여주고,

특정 공간의 사용자 조작을 막을 수 있는 플러그인입니다.

 

 

---

1. loading.js 웹사이트

carlosbonetti.github.io/jquery-loading/

jquery-loading

 

위의 웹사이트로 이동하면 다양한 예시가 있지만, 간단한 예시를 몇 가지 보여드리겠습니다.

---

2. loading.js 설치 및 사용

github.com/CarlosBonetti/jquery-loading

CarlosBonetti/jquery-loading

1. 위의 깃허브 페이지로 이동하신 후 코드를 다운로드합니다.

 

깃허브에서 다운로드하는 방법 이외에 bower에서 다음과 같이 입력하여 설치가 가능합니다.

$ bower install jquery-loading

npm으로 설치는 다음과 같습니다.

$ npm install --save-dev jquery-easy-loading

 

 

2. loading.js는 기본적으로 jquery가 필요합니다.

설치한 loading.js와 jquery를 함께 다음 소스코드와 함께 불러옵니다.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.loading.js"></script> <!-- 저장된 loading.js 경로 -->

 

 

3. 로딩 오버레이를 씌우고 싶은 요소를 지정하여 로딩을 다음과 같이 걸어줍니다.

$("#element").loading();

그럼 다음과 같이 내용이 출력됩니다.

 

4. 끝. 참 쉽죠?

 

 

---

3. 옵션

이렇게 끝나면 너무 시시하니 loading.js에 몇 가지 옵션을 넣어봅시다.

 

(1) 메시지 변경

로딩 메시지가 현재 " L O A D I N G . . . " 입니다.

하지만 우린 이 문구를 한글로 쓰고 싶거나 다른 내용으로 채우고 싶을 겁니다.

다음과 같이 한 줄의 옵션으로 이 문제를 해결할 수 있습니다.

$("#container").loading({
	message: '로딩중입니다...'
});

 

(2) 원하는 타이밍에 오버레이 거두기

위의 예제를 따라 해 본 분들은 아시겠지만 로딩 오버레이를 씌우면 다시 걷을 수 없을 겁니다.

만약 AJAX 통신 후, 처리가 끝나는 타이밍에 오버레이를 걷어야 사용자가 웹페이지를 이어서 사용할 수 있을 것입니다.

실행 중이던 오버레이를 중단하는 방법은 다음과 같습니다.

$('#container').loading('stop');

옵션에 'stop'만 붙이면 로딩은 종료됩니다.

 

(3) 토글로 오버레이 컨트롤하기

토글 옵션을 주면 로딩을 실행하고 중단하기를 쉽게 할 수 있습니다.

만약 로딩이 실행 중이면 중단시키고, 실행 중이지 않으면 로딩을 실행할 수 있습니다.

다음 코드 1줄이면 가능합니다.

$('#container').loading('toggle');

 

(4) 클릭하여 로딩 중단 옵션 주기

가끔 사용자가 처리를 중단하고 싶을 때, 사용자가 로딩을 중단하고 작업을 이어나가야 할 경우가 있습니다.

그럴 때 사용자가 로딩 오버레이를 클릭하면 사라지는 기능을 추가할 수 있습니다.

$('#container').loading({
	stoppable: true
});

옵션에 위의 stoppable을 넣어주면 사용자가 클릭하여 직접 오버레이를 거둘 수 있습니다.

 

---

이외 다양한 옵션이 있으니 홈페이지를 보고 참조하시면 되겠습니다.

 

가끔 가볍고 간단한 웹사이트, 애플리케이션을 만들 때 가벼운 플러그인을 선호하게 됩니다.

이 플러그인은 아주 심플한 로딩 처리를 해주고 가볍기 때문에 소개해 드립니다.

 

다음에도 유용한 정보로 찾아오겠습니다.