【CSS/jQuery】ローディング中のページを表示してサイトをおしゃれに!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年5月29日に投稿されました。)

皆さんはサイトをクリックした時に、ページを読み込むローディング画面が表示されたことはありますか?

ローディング画面からサイトを表示するまでの流れ

こちらのアニメーションはページを読み込む際に発生するイベントであり、サイトの読み込みの進捗状況をユーザーに伝えることができます。

しかし、実際に読み込んでいるから表示しているのではなく、TOPを表示する前のアニメーションとして表示していることがほとんどです。

こちらのアニメーションはCSSとjQueryを使用すれば作成することができますのでこの記事を見るとどのような仕組みになっているのか勉強になるかと思います。

また、「BootStrap」というフレームワークを使用すると、初心者でも簡単にローディング中のページを作成することができますので、一度挑戦として作成してみるのもありだと思います。

今回はCSSとjQueryでローディング中のページを表示する方法についてご紹介していきます。

この記事はこんな方におすすめ
・サイトにおしゃれなアニメーションをつけたい人
・ローディングの画面を表示したい人

ローディング中のページを表示する方法

ローディング中のページを表示する方法は下記のような手順となります。

STEP.1
パーセンテージのカウントアップを表示する
カウントアップしながらパーセンテージを表示します。
STEP.2
数字のカウントアップと同時にプログレスバーを表示する
パーセンテージが大きくるたびに、プログレスバーの長さを調整します。
STEP.3
ローディングが完了した後のページを表示する
パーセンテージが「100%」になった後、ページの中身を表示します。

それぞれ手順を追ってご紹介していきます。

パーセンテージのカウントアップを表示する

まずは、ローディング中のパーセンテージのカウントアップを表示していきます。

始めは「0%」ですが、時間が経つにつれてパーセンテージが増加し、最終的には「100%」になるようにします。

そのぞれのファイルに下記のコードを追記していきます。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

実行結果

パーセンテージのカウントアップを表示した結果

JavaScriptの「setInterval」を使用することで、パーセンテージを増やす処理を一定時間ごとに繰り返して行っています。

そのため、0%から100%にパーセンテージがカウントアップされています。

Sossy

「start++」によって「1%」の間隔で増やしていますが、「2%」に間隔を増やしたい場合は「start = start + 2」に変更すると良いですよ。

パーセンテージのカウントアップと同時にプログレスバーを表示する

パーセンテージのカウントアップを表示できましたら、同時にプログレスバーを表示していきます。

パーセンテージがカウントアップされるにつれて、プログレスバーの長さも変化するようにしていきます。

先ほどのhtmlファイルのbody内を下記のコードへ変更していきます。

⚫︎ example.html

続いて、先ほどのCSSファイルに下記のコードを追記していきます。

⚫︎ style.css

最後に、先ほどのJSファイルを下記のように変更します。

⚫︎ index.js

実行結果

パーセンテージのカウントアップと同時にプログレスバーを表示した結果

setIntervalの中に、jQueryのcss()にwidthを指定することで、パーセンテージのカウントアップと同時にプログレスバーの長さも調整しています。

そのため、0%から100%にパーセンテージがカウントアップされるにつれて、プログレスバーが伸びています。

ローディングが完了した後のページを表示する

パーセンテージとプログレスバーを表示することができましたら、最後にローディングが完了した後のページを表示していきます。

ページを必ず初めにローディングの画面が表示されますので、100%になると同時に消す処理を加えていきます。

先ほどのhtmlファイルのbody内を下記のコードへ変更していきます。

⚫︎ example.html

続いて、先ほどのCSSファイルに下記のコードを追記していきます。

⚫︎ style.css

最後に、先ほどのJSファイルを下記のように変更します。

⚫︎ index.js

実行結果

ローディングが完了した後のページを表示した結果

JavaScriptのsetTimeoutの中に、jqueryのfadeOut()を使用することで、一定時間後に「.load_area」の要素を消しています。

そのため、ローディング画面が100%に達した後に、ページの内容が表示されています。

Sossy

speedが「25」であることから1%が「0.025s」の間隔で増えており、100%までに「2.5s」かかっています。
そのため、0.1s遅らせた「2600(2.6s)」にfadeOut()が実行されるよう設定しています。

実際のサイトでローディングした後にページを表示してみた

実際のサイトでローディングした後にページを表示してみましたのでご紹介します。

TOPページに先ほどのコードを追記するようにします。

今回、例となるサイトは「front-page.php」がTOPページになりますので、front-page.phpに下記のコードを追記します。

⚫︎ header.php

⚫︎ style.css

⚫︎ footer.php

実行結果

実際のサイトでローディングした後にページを表示してみた結果

TOPページを表示する前に、ローディングのページが表示されています。

また、開始位置を真ん中にすることで、左右にプログレスバーが伸びるようにしています。

BootStrapを使ってローディング中のページを表示する場合

ローディング中のページはBootStrapを使用することでも作成が可能です。

BootStrapとは、スマホからPCまでの画面を素早くデザイン・カスタマイズできるフレームワーク(強化パーツ)となります。

BootStrapで準備されているクラスを指定するだけで良いので、初心者でも簡単に様々なパーツを自分のサイトに設置することができます。

そのため、ここではBootStrapのProgressで準備されているプログレスバーのクラスを指定してローディング中の画面を作成してみます。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

実行結果

BootStrapを使ってローディング中のページを表示した結果

BootStrapで準備されているクラスを使用して、ローディング中のページを表示しています。

また、progress-barのクラスの後に、別のクラスをつけると色の変更ができますので、デザインにこだわることなくプログレスバーを作成することができます。

Sossy

BootStrapでは、progress-barのクラスの後に「bg-success」をつけると緑色に、「bg-danger」をつけると赤色に変化させることができますよ。

Progressbar.jsを使ってローディング中のページを表示する場合

Progressbar.jsを使用することでも、ローディング中のページを表示することができます。

Progressbar.jsとは、プログレスバーを簡単に作れることができるJavaScriptのライブラリとなります。

プログレスバーは横長の棒線だけでなく、線のバー、丸形、半円形など様々な形へとカスタマイズすることができます。

そのため、ここではProgressbar.jsを使用して円形のローディング中の画面を作成してみます。

⚫︎ example.html

⚫︎ style.css

⚫︎ index.js

実行結果

progressbar.jsを使ってローディング中のページを表示した結果

Progressbar.jsを使用して、ローディング中のページを表示しています。

また、プログレスバーが円形で表示されています。

まとめ

⚫︎ローディング中のページを表示する方法は下記のような手順となる。
・ パーセンテージのカウントアップを表示する
・ パーセンテージのカウントアップと同時にプログレスバーを表示する
・ ローディングが完了した後のページを表示する

⚫︎ パーセンテージを増やすには、JavaScriptの「setInterval」を使用する

⚫︎ パーセンテージのカウントアップと同時にプログレスバーを伸ばすには、「setInterval」の中に、jQueryのcss()を指定する
(今回は長さを伸ばしたいのでcss()の中にwidthを指定している)

⚫︎ ローディング後のページを表示するには、JavaScriptの「setTimeout」の中に、jqueryのfadeOut()を使用する

⚫︎ BootStrapを使用すると簡単にローディング中のページを表示することができる
(クラスをつけるだけで良いので、デザインにこだわらなくて良い)

⚫︎ Progressbar.jsを使用することでも簡単にローディング中のページを表示することができる
(プログレスバーの形をカスタマイズできる)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA