jQuery、ローディング

ローディングアニメーションは、ユーザーに対して現在何が起こっているかを視覚的に示します。これにより、ページやデータが読み込まれていることがユーザーに明確になります。そして実際の待機時間が短く感じられることがあります。アニメーションがあることで、ユーザーは「待っている」感覚が和らぎます。

色んなローディング画面

10秒間ローディング

5秒間のローディングアニメーションです。長いですがサンプルの為に長くしております。delay(10000)の数値を調整すると長くしたり、短くも出来ます。

See the Pen jQuery by sho-ta (@sho-ta) on CodePen.

1文字づつ透過させるローディング

1文字づつ透過させてローディング画面を表現しています。

See the Pen jQueryローディング2 by sho-ta (@sho-ta) on CodePen.

よく見るローディング画面、3つの点が円形に広がる

ここでは、3つの点が円形に広がり、順にフェードイン・フェードアウトするアニメーションを作成します。このデザインはシンプルながら視覚的に魅力的で、モダンな印象を与えることができます。

See the Pen jQueryローディング3 by sho-ta (@sho-ta) on CodePen.

10秒間ローディング、DOMの読み込みが完了したら、フェードアウトさせる

最低10秒間はローディングさせて、尚且つDOMの読み込みが完了したら、フェードアウトさせます。10秒は長いですが、例えば最低2秒と決めて、その後は読み込みが完了したらフェードアウトさせるというアニメーションも考えられます。そうしないとすぐに読み込まれた場合、すぐに消えてユーザーに対して、逆に不快に思われてしまいます。なので少しは表示させるようにしましょう。

読み込みのタイミングは通常DＯMが完了してからですが、サイト構成などによっては画像読み込みなどの後に読み込む場合もあります。

// DOMの読み込みが完了した時の処理
$(document).ready(function() {
  console.log("DOMの読み込みが完了しました。");
});
// 画像の読み込みが完了した時の処理
$(window).on('load', function() {
  console.log("画像の読み込みが完了しました。");
});

See the Pen jQueryローディング4 by sho-ta (@sho-ta) on CodePen.