개요

웹페이지를 만들다 보면 로딩바 즉, 프로그레스바 (Progress Bar)가 필요한 경우가 있습니다.
이때 부트스트랩(Bootstrap)의 [Progress Bar]와 자바스크립트 함수 [setInterval]을 이용하면 간단하게 만들 수 있습니다.

예제

처음 페이지 로딩할 때 아래 로딩바가 조금씩 움직이는 걸 확인할 수 있습니다. 다시 보시려면 새로 고침을 해보시면 됩니다.


소스 코드

아래는 HTML과 JavaScript 소스코드입니다.
HTML은 우선 Bootstrap가 있어야 하므로 상단에 css, js 파일을 불러오는데, Bootstrap 3.x 버전과 4.x 버전이 조금 다르니 사용하시는 버전으로 골라서 적용하시면 됩니다.

원리는 Progress Bar의 길이를 Javascript 함수 setInterval을 이용해서 일정 시간마다 조금씩 늘려주는 방식입니다.

Bootstrap 3.4 

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div>
  <div class="row justify-content-center">
    <div class="col-sm-11">      
      <div class="progress" style="height: 20px;">
        <div id="progressbar-stat" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
      </div>
    </div>
  </div>
</div>


<script >
  let i = 1;
  let interval = setInterval(function() {
    i++;
    let val = i * 15;
    if (val > 90)
    {
      val = 90;
    }
    val_str = val+"%";
    $("#progressbar-stat").css("width", val_str);
  }, 500);

  setTimeout(function() {
    clearInterval(interval);
  }, 5000);
</script>

Bootstrap 4.6 

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div class="row justify-content-center">
    <div class="col-sm-8 col-sm-offset-2">
      <div><span style="font-size:50px">데이터 로딩</span></div>
      <div class="progress" style="height: 50px;">
        <div id="progressbar-stat" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
      </div>
    </div>
  </div>
</div>


<script >
  let i = 1;
  let interval = setInterval(function() {
    i++;
    let val = i * 15;
    if (val > 90)
    {
      val = 90;
    }
    val_str = val+"%";
    $("#progressbar-stat").css("width", val_str);
  }, 500);

  setTimeout(function() {
    clearInterval(interval);
  }, 5000);
</script>