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

はじめに

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

完成イメージ

環境

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に

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内の「投稿するボタン」を押した時にローディング画面を表示させるようにします。

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

new.html.erb

<input type='submit' id='sending' class='send__btn' value='投稿する'>

次にjsファイルです。jsファイルは「loading.js」ファイルを作成してそこに記述します。

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show");
  });
});

以上です。
これで実際に投稿するボタンを押してみると

といった感じになります。

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

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      text :"Sending..."
    });
  });
});

こう記述することで、

このようにテキスト文を入れることも可能です。

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

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

loading.js

$(function() {
  $("form").on('submit', function(){
    $.LoadingOverlay("show", {
      image       : "",
      fontawesome : "fa fa-cog fa-spin"
    });
  });
});

実行すると次のようになります。

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

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);
    });
  });
});

実行した結果は以下になります。

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

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,
    });
  });
});

実行結果は以下のようになります。

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

以下コードです。

loading.js

$(function() {
  $("#sending").click(function(){
    $("#sending").LoadingOverlay("show");
  });
});

実行結果は以下の通りです。

参考リファレンス

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

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