목적

어떠한 처리를 하고 있는 동안만 로딩 아이콘을 내고 싶다.

외부 라이브러리를 사용해도 할 수 있습니다만, 디자인이 지금 제대로 오지 않았기 때문에, FontAwesome의 로딩 아이콘을 사용해 구현했습니다.

Fontawesome이란?

웹사이트에서 자주 사용하는 아이콘을 무료로 제공해 주는 서비스입니다. (유료 플랜도 있지만 이번에는 무료 플랜 아이콘을 사용합니다)

동작

버튼을 누르면 어떠한 처리가 실행되고, 처리가 종료할 때까지 로딩 아이콘이 빙글빙글 돌립니다.

출처

HTML

 <!-- ボタン -->
　<button>ここを押すと何らかの処理が始まる</button>

 <!-- ローディングアイコン -->
  <div class="loading">
    <i class="fas fa-spinner fa-5x fa-spin"></i>
  </div>

css

.loading {
  display: none; /* 通常時は非表示 */
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  color: gray;
}

javascript

  $('button').on('click', function(){
    // ローディングアイコンを表示
    $('.loading').css('display', 'block');

    // doSomethingでなにか処理を実行し、処理が終わったらダイアログを出す
    google.script.run
    .withSuccessHandler(function(){
      $('.loading').css('display', 'none');
      alert('成功しました');
    })
    .doSomething();
  });

GoogleAppsScript

  function doSomething(){
    // なにかする
    return true;
  }

해설

우선 HTML 측에서 로딩 아이콘을 준비해 둡니다.
class에 fa-spin 를 지정하는 것으로 아이콘이 빙글빙글 돌립니다.

 <!-- ローディングアイコン -->
  <div class="loading">
    <i class="fas fa-spinner fa-5x fa-spin"></i>
  </div>

그러나 준비한 아이콘은 CSS에서 display:none; 로 숨겨두고 버튼을 누를 때 display:block; 로 하여 화면에 표시시킵니다.

로딩 아이콘을 표시하면, 그 후 하고 싶은 처리를 doSomething() 로 실행, 끝나면 아이콘을 display:none; 로 지워, 다이얼로그를 표시합니다.