[jQuery] progressbar & 로딩중 텍스트 변경

이번 기록할 내용은 프로그래스바가 100%로 채워지면서

하단 텍스트가 변경되는 내용이다.

 

가끔 로딩화면이 필요한 경우가 있어 프로그래스바 작업은 했었는데,

추가로 텍스트 변경 요청이 있어서 같이 작업할 겸 기록하기!

 

먼저 html,css로 로딩바 스타일 잡기.

<div id="progress-bar">
  <div id="progress"></div>
</div>
<p class="loading-txt">텍스트영역</p>

progress-bar는 전체 로딩바 영역

progress는 채워지는 로딩바 영역

loading-txt는 변경될 텍스트 영역

#progress-bar {
  width: 100%;
  background-color: #f1f1f1;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
}

#progress {
  background-color: #24bbff;
  height: 100%;
  width: 0;
  border-radius: 30px;
  transition: width 20s linear;
}

#progress는 100%로 채워져야하니까 초기값은 width값 0으로 세팅!

 

$(document).ready(function() {
  function updateProgressBar(percentage,loadingTime) {
    $('#progress').css('width', percentage + '%');
    $('#progress').css('transition-duration',loadingTime+'s');
  }
  
  // 0.1초마다 로딩 바 업데이트
  var progress = 0;
  var loadingTime = 10;
  var txt = ['안녕하세요','로딩중입니다.','잠시만 기다려주세요.','거의 다 왔어요!'];
  var totalText = txt.length;
  var interval = setInterval(function() {
    progress += 10;
    if (progress <= 100) {
      updateProgressBar(progress,loadingTime);
    } else {
      clearInterval(interval);
    }
  }, 100);
  
  var cnt = 0;
  var textChange = setInterval(function() {
    if(cnt < totalText){
      $(".loading-txt").text(txt[cnt]);
      cnt += 1;
    }else{
      clearInterval(textChange);
    }
  }, 2000);
});

updateProgressBar 함수를 만들어서 로딩바가 몇초동안 100%로 채워질 지 세팅해둔다.

 

하단에 필요한 변수의 초기값을 세팅해두고,

setInterval함수로 pregress바가 몇초동안 채워질지, 저기서는 0.1초마다 업데이트 시켜서 만들어둔 updataProgressBar를 호출시킨다.

더이상 로딩될 필요가 없을 때(progress바가 끝까지 도달했을 때) clearInterval 함수를 호출 해 반복을 중단 시킨다.

 

이제, 변경될 텍스트 영역을 작업해야함!

txt 텍스트 배열을 하나 만들어두고 변경되어야할 텍스트를 배열에 넣어둔다.

totalText 변수에 텍스트 배열의 길이만큼 cnt값을 증가시켜 미리 만들어둔 loading-txt 영역에 들어갈 수 있도록 만든다.

텍스트 노출도 마찬가지로 배열의 끝까지 갔을 때 clearInterval로 중단시킨다.

 

여기에 디자인을 좀 추가해서 완성된 화면을 보면

사용자가 웹 화면을 기다릴 때 조금 덜 지루한 화면을 제공할 수 있다!