로딩바 만들기 (버튼 클릭 / html, css, 제이쿼리, 스프링 부트)

로딩바 만들기

버튼 클릭시 로딩바를 만들어야 하는 상황이 있었습니다.

 

아래의 그림처럼, 정보를 입력하고, 전송 버튼을 누르면 데이터를 서버에서 전송하고, 결과를 서버에서 전송받는 시간에 로딩바를 출력해줘야합니다. (로딩 시간이 늦으면 늦을수록 더 필요한 기능일 겁니다.)

 

이럴때 필요한 로딩바를 만들어 보겠습니다. 시간이 없으신 분들은 복사/붙여넣기 해도 동작될 겁니다.

 

제이쿼리 추가 및 코드 추가

 

먼저 제이쿼리를 사용해야하기 때문에 아래의 스크립트로 제이쿼리를 추가합니다.

제이쿼리가 다소 무겁다고 하긴 하지만 순수 자바스크립트로 짜는 것보다 간편하고 명확합니다.

(둘중 하나만 추가 하시면 됩니다.)

<!--제이쿼리 3.5.1 버전-->
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>

<!--항상 최신버전의 제이쿼리를 사용한다-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

 

 

 

그리고 아래의 스크립트를 추가해줍니다.

코드의 내용을 간단히 설명하자면,

loding 이라는 id를 가진 로딩바 영역을 hide() 함수로 안보이게 하다가 trans 라는 아이디를 가진  form의 submit의 동작일때, 다시 보여주는 형식입니다.

평소에 로딩바를 숨기고 있다가 버튼 클릭시 보여주고 submit 동작이 끝나면 다시 숨김 처리합니다.

 <script>

$(document).ready(function() {

$('#loading').hide();
$('#trans').submit(function(){
    $('#loading').show();
    return true;
    });
});

</script>

 

로딩 gif 파일 / 로딩바 영역, css 추가

 

먼저 사용하실 로딩 파일이 없다면 아래의 gif 파일을 다운받아주세요.

 

로딩바 gif

 

로딩바 html은 아래와 같습니다. 추가해줍시다.

<!--로딩바-->
<div id="loading" style="margin-left: 0px;">
    <img src="/images/로딩바.gif">
    <p>변환중입니다..잠시기다려주세요.</p>
</div>

 

 

 

그리고 css 코드를 추가해 줍니다.

/* page-loading */
  #loading {
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	position: fixed;
  	display: block;
  	opacity: 0.6;
  	background: #e4e4e4;
  	z-index: 99;
  	text-align: center;
  }



  #loading > img {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	z-index: 100;
  }
   #loading > p {
    	position: absolute;
    	top: 57%;
    	left: 43%;
    	z-index: 101;
    }

 

 

버튼 클릭 후, action이 끝날 때 까지 로딩바가 잘 작동됩니다.

 

 

 

긴글 읽어 주셔서 감사합니다.

더 궁금하신 사항은 댓글로 문의해주시면 빠르게 답변드리겠습니다.