ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

CSSアニメーションとjQueryで簡単に作れるローディング画面サンプル

| カテゴリー : HTML/CSS

こんにちは、ちゃんけいです。

Webサイトのローディング画面は、ユーザーにページ読み込みが行われていることを伝えやすく、表示までのストレス軽減に役立つのでおすすめです。

今回はCSSアニメーションを利用した簡単なローディング画面を紹介したいと思います。

まずは完成イメージをご確認ください。こんなローディング画面をつくります。

See the Pen CSS Loading by Chankei (@Chankei) on CodePen.

HTML、CSSの準備

はじめに、ローディング時に表示される全面黒背景のレイヤーをサイトの上に重ねたいと思います。
次のHTMLを見て下さい。

ローディング画面とわかるクラス名をつけたdivを置きます。今回はそのまま、loadingというクラス名です。
その中に、animationというクラス名のついたdivがあります。CSSアニメーションが行われるdivタグになります。

次にCSSを設定していきます。

まずはローディング画面の大枠を決めます。
今回は全面を黒背景にします。背景色は、好みのものに変更してください。
position: fixed;をつけることで、サイトの上に被さるような形にしています。

そしてアニメーション部分はこちら。
keyframeアニメーションを使って、文字の透明度を変化させています。

真ん中に表示するためにpositionを使っています。上位ブラウザだけが対象であればflex-boxを使うとより簡単です。

黒背景と、CSSアニメーションで完成したのがこちらになります。

See the Pen CSS Loading by Chankei (@Chankei) on CodePen.

jQueryでWebサイトのロードが完了した時の処理を書く

このままでは、ローディング画面がずっと出たままになってしまいます。
なので、ページを読み込んだら.loadingがフェードアウトするようにjQueryを書きます。

これでローディング画面が簡単に実装できました。

他にもfakeLoder.jsなどプラグインもありますのでオススメです。

ローディング画面のサンプル紹介

簡単に実装できたはいいのですが、アニメーションの部分は少し大変ですね。
なのでGitHubなどで公開されているものを参考にするのが良いです。

Loaders.css

こちらは、すこし変わったアニメーションがたくさんあります。

Single Element CSS Spinners

こちらは、ローディング画面とすぐわかるような見た目のものばかりなので使いやすいかと思います。
サムネイル部分の「View Source」をクリックすることですぐにCSSをコピペできるのでとても便利です。

他にもCodePenの検索で、「Loading」など探してみるのもオススメですし、技術系のサイトで多数のCSSアニメーションが紹介されているのでそちらもオススメです。

一度仕組みがわかってしまえばCSSアニメーションはとても簡単なので、ぜひコードを読み解いて自分の思った通りの動きをさせてみてください。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。