JQueryの簡易ローディング

色々小細工しなくたって、これでいいよね。

  <header class="">
    ナニガシカノナビゲーション
  </header>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#form').on('submit', function(e) {
        $('#loading-screen').show();
        $('main').hide();
      });
    });
  </script>
  <div class="text-center py-3" id="loading-screen" style="display: none;">
    <button class="btn btn-primary btn-lg" type="button" disabled>
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      登録中
    </button>
  </div>

  <main>
  　　イロイロカキタイコト
   <form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data" id="form">
   @csrf
     <div class="mb-5">
      <div>
        <label for="file" class="form-label">データをアップロード</label>
        <input class="form-control" id="file" type="file" name="file">
      </div>
    </div>
    <div class="text-center">
      <button type="submit" class="btn btn-primary btn-lg" id="submit">アップロード</button>
    </div>
   </form>
  </main>
  

未来のボクへの贈り物をシェアします。