스피너 만들기

 

스피너

스피너는 일반적으로 웹 페이지에서 비동기 작업이나 오래 걸리는 작업이 진행될 때 사용자에게 진행 중임을 표시하는 동그란 로딩 아이콘이다.

<!-- Spinner Start -->
  <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
<!-- Spinner End -->

(function ($) {
    // Spinner
    var spinner = function() {
        setTimeout(function() {
            // ID가 "spinner"인 코드가 적어도 하나가 있는지 확인
            if ($('#spinner').length > 0) {
                $('#spinner'). removeClass('show');
            }
        }, One);
    };
    spinner();
})(jQuery);

 

(function($) { ... })(jQuery);

는 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)이다. 이를 사용하는 이유는 $ 기호를 jQuery와 같은 라이브러리의 변수로 사용하기 위해서이다. 이렇게 하면 다른 라이브러리가 $ 기호를 사용하고 있어도 충돌하지 않고 jQuery를 사용할 수 있다.

spinner 함수는 setTimeout 함수를 사용하여 일정 시간이 지난 후에 실행된다. setTimeout 함수는 주어진 시간(여기서는 One)이 경과한 후에 콜백 함수를 실행한다. 콜백 함수는 현재 페이지에 '#spinner'라는 아이디를 가진 요소가 있는지 확인하고, 있을 경우 해당 요소의 'show' 클래스를 제거한다. 이렇게 하면 스피너가 사라지고, 진행 중인 작업이 완료되었음을 사용자에게 알릴 수 있다.

여기서 주목해야 할 부분은 setTimeout 함수의 첫 번째 인자로 사용된 One이다. One은 정의되어 있지 않은 변수이므로 코드의 다른 부분에서 정의되어야 한다. 이 변수는 스피너가 표시되는 시간을 설정하는 값으로 이 값을 적절하게 설정하여 스피너가 표시되는 기간을 조정할 수 있다.