JavaScriptページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか...今何を待ってたんだっけ...なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。ローディングアニメーションの設置手順こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。「CSSだけで実装できる!」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。ローディング画面の用意まずはコンテンツを用意しましょう。その下にページのコンテンツとなる画像を配置しました。プロパティーで重ねます。ページ全体を読み込んだらローディング画面を非表示にするここでJavaScriptの登場です。クラスを加える」という意味。そのloadedクラスにはCSSで、要素を透明にして非表示にする指定をしています。CodePen.こんな感じで実装できました!あえてローディング画面を表示させるように、サイズ容量の大きい画像を並べています。再度読み込みたい時は画面右下の「Rerun」ボタンをクリックしてみてください!ローディングアニメーションを手軽に実装できるサイトくるくる回ったり、ふよふよ動いたりするローディングアニメーション。一から自分で作るとなると大変かと思いますが、親切な方が作って配布しているコードが多々ありますよ。Source」をクリックするとHTML/CSSのコードが表示されます。画面左上の「BG」や「FG」から色の変更・プレビューも可能!SpinKitWebサイト|GitHub左右に表示された矢印をクリックして、別のアニメーションを閲覧できます。画面上部の「Source」をクリックするとHTML/CSSのコードが表示されますよ。今回作成したデモでは6番目のものを使用しています。SpinnersWebサイト|GitHub定番の形から少し変わったものまで、様々なアニメーションが用意されています。各アニメーションをクリックするとHTML/CSSコードが表示されます。ように要素にアニメーションのクラスを付与して表示させます。いった、Webサイトのアニメーションの下に記述されているHTMLコードを記述して適用させます。いった形でアニメーションのクラスを付与して表示させます。ローディングアニメーションの実装例いろいろ最後にCodePenで見かけたローディングアニメーションの実装例をいくつか紹介します。CodePen.本当ならこういったローディングアニメーションがなくてもユーザーを待たせないような、読み込みに時間のかからないWebサイトに設計できるといいですよね。「なんとなくかっこいいから」と実装するのではなく、使い勝手を考えて導入するようにしましょう!シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。