[JQUERY] Create wait/loading animation using jquery(addClass,removeClass)

웹 개발을 하다보면 Ajax 등을 이용하여 데이터를 처리할 때 사용자의 눈을 즐겁게(?)하는
로딩 바를 만드는 방법에 대해 작성하겠습니다.

Jqeury를 이용한 CSS 제어로 쉽게 만들 수 있지요. 차근차근 따라해보시면 금방 만드실 수 있을겁니다.

Step1 - Get loading animation image(로딩 애니메이션 이미지 구하기)

플래시를 잘 하신다면야 직접 만들어도 되지만, 인터넷에 괜찮은 샘플이 많이 있습니다.
구글링을 통해 검색하시면 쉽게 찾을 수 있습니다.

아래와 같은 키워드로 이미지 검색 하면 금방 찾지요.

animated gif loading transparent background

검색하면 줄줄이 나오네요. 물론 free에서 찾아서 사용하시고, 그래도 저작권이 걸린다면
직접 만드시면 됩니다 :)

Step2 - Write loading layer(로딩 이미지가 생성될 구역 만들기)

div 태그를 이용해서 loading 이미지가 나타날 영역을 하나 만들어 놓습니다.
우리가 css를 제어할 수 있도록 id를 설정해줍니다.


<div id="loading_layer"></div>

움.. 좀 더 보시기 편하도록 html 페이지 하나를 만들어 놓고 진행할게요.


<html>
<body>

<input type="button" value="on loading!">   <!-- 로딩 트리거 -->
<input type="button" value="off loading!">  <!-- 로딩 제거 -->
<br><br><br>
<div id="loading_layer"></div>   <!-- 로딩 구간 -->

</body>
</html>

Step3 - Write loading gif CSS(로딩 이미지를 위한 CSS 작성)

로딩 영역에 뿌려줄 CSS를 작성합니다. Class는 loading으로 하였습니다.


<style>
.loading{background-image:url('./loading.gif');background-repeat:no-repeat;background-position:center;}
</style>

보시면 아까 받은 loading.gif를 배경으로 지정하는 css 입니다.


<html>
<body>

<style>
.loading{background-image:url('./loading.gif');background-repeat:no-repeat;background-position:center;}
</style>

<input type="button" value="on loading!">
<input type="button" value="off loading!">
<br><br><br>
<div id="loading_layer"></div>

</body>
</html>

Step4 - Write Javascript(Jquery) for animated

이제 input 태그를 onclick 시 jqeury를 이용해서 로딩 이미지를 뿌리기 위해
간단한 스크립트를 작성합니다.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script><script>
function loading_on()
{
 $("#loading_layer").addClass("loading");  // 이 부분은 loading_layer에 class(css)를 추가하는 부분입니다.
}
function loading_off()
{
 $("#loading_layer").removeClass("loading");  // 이 부분은 loading_layer에 class(css)를 제거하는 부분입니다.
}
</script>

이렇게 하면 트리거 시키기 위한 준비는 거의 끝났습니다. 각각 input 태그에 onclick event handler를 이용해 함수를 실행시킬 수 있도록 세팅합니다.


<input type="button" value="on loading!" onclick="loading_on()">
<input type="button" value="off loading!" onclick="loading_off()">

And finally - Trigger Loading animatMovie for stepion(Full code)

이제 모든게 준비되었습니다. input 을 눌러서 트리거해보세요.

전체 코드입니다.


<html>
<body bgcolor="black">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script><script>
function loading_on()
{
 $("#loading_layer").addClass("loading");  // 이 부분은 loading_layer에 class(css)를 추가하는 부분입니다.
 return 1;
}
function loading_off()
{
 $("#loading_layer").removeClass("loading");  // 이 부분은 loading_layer에 class(css)를 제거하는 부분입니다.
 return 1;
}
</script>
<style>
.loading{background-image:url('./loading.gif');background-repeat:no-repeat;background-position:center;}
</style>

<input type="button" value="on loading!" onclick="loading_on()">
<input type="button" value="off loading!" onclick="loading_off()">
<br><br><br>
<div id="loading_layer" width=100% height=100% class=""><br><br><br><br><br><br><br></div>
</body>
</html>

어떠신가요? 잘 되시나요. 지금은 버튼으로 해두었지만, 각각 요청전, 응답 후 에 on과 off를 통해서 로딩 화면을 만들 수 있습니다.

아래 간단하게 영상으로 보여드리고 마칠게요.