jQueryでローディング画面を実装

# はじめに
今回は、フォームなどで送信した際に、送信中に画面上にローディング画面を表示させる実装を行います。

# 完成イメージ
![loadingAnimation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/c8776fa9-20e7-81f6-6130-f3e577d7ee4d.gif)


# 環境
MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

# 前提条件
- jQueryが導入済みであること。
- font-awesomeが導入済みであること。

# 作業していきましょう

###①jquery-loading-overlayの導入
今回は、「jquery-loading-overlay」というjQueryプラグインを使用してローディング画面を実装します。

jquery-loading-overlayを使う場合は、npmでインストールする方法や、CDNを使って導入する方法がありますが、今回はCDNを使った方法で導入していきます。

application.html.erbに

```erb:application.html.erb

<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>
```
こちらを追加します。

これで準備ができました。

###②jsファイルに処理を記述
jsファイルにどのタイミングでローディング画面を表示させるのかを記述します。

今回はnew.html.erb内の「投稿するボタン」を押した時にローディング画面を表示させるようにします。

一応紹介しますが、投稿するボタンは以下の通りです。

```erb:new.html.erb
<input type='submit' id='sending' class='send__btn' value='投稿する'>
```
次にjsファイルです。jsファイルは「loading.js」ファイルを作成してそこに記述します。

```javascript:loading.js
$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show");
  });
});
```
以上です。
これで実際に投稿するボタンを押してみると
![loadingAnimation2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/4e6cf325-4a95-18d7-f09a-7d76f6827348.gif)
といった感じになります。

###③オプションの指定
jquery-loading-overlayではオプションを使って、ローディング画面をカスタマイズできます。
####③-1テキストを挿入
例えばテキスト文を追加したい場合は、

```javascript:loading.js
$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      text :"Sending..."
    });
  });
});
```
こう記述することで、
![loadingAnimation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/50034948-9eb1-21fc-e95f-db70c4b45190.gif)
このようにテキスト文を入れることも可能です。

####③-2 font-awesomeを使用する
あとは、次のようにfont-awesomeを使って、アイコンを変更することも可能です。

ちなみに、font-awesomeのアイコンを回転させる場合には、クラス名の後ろに`fa-spin`と記述することで、
アイコンを回転できます。

```javascript:loading.js
$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      image       : "",
      fontawesome : "fa fa-cog fa-spin"
    });
  });
});
```
実行すると次のようになります。
![loadingAnimation3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/5e50d91a-6173-1733-e931-cb5e58119aaf.gif)

####③-3ステータスバーを表示
次のような設定をすることで、ロードの進捗状況を可視化できるようになります。

```javascript:loading.js
$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      image       : "",
      progress    : true
    });
    let count     = 0;
    let interval  = setInterval(function(){
      if (count >= 100) {
        clearInterval(interval);
        return;
      }
      count += 10;
      $.LoadingOverlay("progress", count);
    });
  });
});
```
実行した結果は以下になります。
![loadingAnimation4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/a332e473-65e8-c442-5993-152a19416e58.gif)

####③-4 カスタマイズする
自分好みの画面にしたい場合にはCSSを指定して作成することも可能です。
以下のように記述することでカスタマイズすることができます。

```javascript:loading.js
$(function() {
  $("form").on('submit', function(){
    var customElement = $("<div>", {
      "css"   : {
        "border"        : "2px solid blue",
        "font-size"     : "30px",
        "color"         : "#ffffff",
        "text-align"    : "center",
        "padding"       : "5px",
      },
      "class" : "your-custom-class",
      "text"  : "送信中...",
    });
    $.LoadingOverlay("show", {
      image       : "",
      fontawesome : "fas fa-sync fa-spin",
      background  : "rgba(0, 0, 0, 0.5)",
      custom      : customElement,
    });
  });
});
```
実行結果は以下のようになります。
![loadingAnimation6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/ee6e5fe1-d367-1d90-03c7-3adab253ed41.gif)

####③-5 特定の要素にだけオーバーレイをかける
クラスまたはidを指定して、特定の要素にだけオーバーレイをかけることもできます。
今回は「投稿するボタン」にだけオーバーレイをかけます。投稿するボタンには`id='sending'と設定しているので、そちらで指定します。

以下コードです。

```javascript:loading.js
$(function() {
  $("#sending").click(function(){
    $("#sending").LoadingOverlay("show");
  });
});
```
実行結果は以下の通りです。
![loadingAnimation7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683220/cae97848-6002-aa17-57d3-6173e36ea644.gif)



# 参考リファレンス
これらは全てjquery-loading-overlayのリファレンスに記述してありますので、そちらを参考にいろいろ試していただければと思います。

リファレンス：　https://gasparesganga.com/labs/jquery-loading-overlay/