クルっと回るアニメーションで「ローディング画面」を作る方法

ページが開いたときに、画面が暗くなって、クルっと回るアニメーションが表示される「ローディング画面」を作る方法をお伝えします。

具体的には、このページを開いたときに表示された「ローディング画面」です。
（もう一度見るには、ここをクリックしてみてください）

もしくは、こちらのページ を見ていただくと、別ウインドウで確認できますよ。

このような、クルっと回るアニメーションの「ローディング画面」を作る方法をお伝えしますね。（コピペのみでできます）

■ クルっと回るアニメーションで「ローディング画面」を作る方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：ローディング画面を表示したいページの <body>タグの真下に、下記のソースを入れる。

↑上記の枠内のソースをすべてコピーして、<body>タグの真下に貼り付けてください。

手順３：上記のソースを入れたページを開いて、ローディング画面が表示されることを確認する。

上記のソースを入れたページ（たとえば index.htmlのページ）を開いて、こちらのページのような、クルっと回るアニメーションの「ローディング画面」が表示されたら、確認作業は完了です。

■【カスタマイズ方法】背景の色を変える方法

「ローディング画面」の背景の色（現在は黒色）を、別の色に変更したい場合は、 CSSファイル（style.css）に貼り付けたソースの中に、「background:#333333;」という記述があるので、この箇所を変更することで色を変えることができます。

たとえば、背景の色をネイビーブルーにしたい場合は、「background:#2C3E50;」にするという形ですね。

ほかにも、ダークグリーン（#344E41）やディープパープル（#3B3B58）、ダークシアン（#005566）などが、おすすめですよ。

■【注意点】ローディング画面のデメリットについて

この「ローディング画面」は、おしゃれに見えますが、ページがすぐに表示されない（2秒くらい待たないといけない）ので、多少のストレスを感じる人もいるかもしれません。

もちろん、ローディング画面が表示されたあとに、すぐにホームページが表示されていくので、ほとんどの人にとっては問題ありませんが、念のため、デメリット部分も知っておいてくださいね。

なお、この「ローディング画面」を入れるのは、「トップページのみ」にしておいた方が良いと思います。

トップページ以外の個別ページについては、ローディング画面を入れる必要がないので、トップページのみにしましょうね。

■ やり方が分からない場合は？

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

【すぐに解決する】
・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

このページのトップ↑

【よく読まれている関連記事】