ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。

↑私が10年以上利用している会計ソフト！

ローディングアニメーションの設置手順

こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。

1. ローディング画面の用意

まずはコンテンツを用意しましょう。上部にローディングアニメーションを表示させる div 、その下にページのコンテンツとなる画像を配置しました。アニメーションは @keyframe を使って表現。CSSでアニメーションを描画する基本的な記述方法は過去記事「CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう」を参照してください！

HTML

<!-- ローディング画面 -->
<div id="loading">
  <div class="spinner"></div>
</div>

<!-- コンテンツ部分 -->
<div class="gallery">
  <div class="item">
    <img src="images/img1.jpg" alt="">
  </div>
  <div class="item">
    <img src="images/img2.jpg" alt="">
  </div>
  
    <!-- ・・・ 以下コンテンツ略 ・・・ -->

</div>

CSS

/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

/* コンテンツ部分の装飾 */
.gallery {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

2. ローディング画面をコンテンツ部分に被せて表示

上下に並んでいたローディング画面とコンテンツを position プロパティーで重ねます。全画面に表示されるように、この部分の幅を 100vw 、高さを 100vh にしています。

CSS

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;

/* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

3. ページ全体を読み込んだらローディング画面を非表示にする

ここでJavaScriptの登場です。短い記述なので怯えなくても大丈夫！window.onload は「ページを読み込んだら」、 classList.add('loaded') は「loaded クラスを加える」という意味。そのloadedクラスにはCSSで、要素を透明にして非表示にする指定をしています。

JavaScript

window.onload = function() {
  const spinner = document.getElementById('loading');
  spinner.classList.add('loaded');
}

CSS

.loaded {
  opacity: 0;
  visibility: hidden;
}

See the Pen
Loading Page by Mana (@manabox)
on CodePen.

こんな感じで実装できました！あえてローディング画面を表示させるように、サイズ容量の大きい画像を並べています。再度読み込みたい時は画面右下の「Rerun」ボタンをクリックしてみてください！

ローディングアニメーションを手軽に実装できるサイト

くるくる回ったり、ふよふよ動いたりするローディングアニメーション。一から自分で作るとなると大変かと思いますが、親切な方が作って配布しているコードが多々ありますよ。これらをそのまま利用してもいいですし、色や形をカスタマイズしてみてもいいですね！

Single Element CSS Spinners

Webサイト｜GitHub

各アニメーションの下にある「View Source」をクリックするとHTML/CSSのコードが表示されます。画面左上の「BG」や「FG」から色の変更・プレビューも可能！

SpinKit

Webサイト｜GitHub

左右に表示された矢印をクリックして、別のアニメーションを閲覧できます。画面上部の「Source」をクリックするとHTML/CSSのコードが表示されますよ。今回作成したデモでは6番目のものを使用しています。

Epic Spinners

Webサイト｜GitHub

定番の形から少し変わったものまで、様々なアニメーションが用意されています。各アニメーションをクリックするとHTML/CSSコードが表示されます。

Three Dots

Webサイト｜GitHub

GitHubからthree-dots.cssをダウンロードして読み込ませ、<div class="dot-elastic"></div> のように要素にアニメーションのクラスを付与して表示させます。指定できるクラスは以下のとおり：

• dot-elastic
• dot-pulse
• dot-flashing
• dot-collision
• dot-revolution
• dot-carousel
• dot-typing
• dot-windmill
• dot-bricks
• dot-floating
• dot-fire
• dot-spin
• dot-falling
• dot-stretching

CSSPIN

Webサイト｜GitHub

GitHubからcsspin.cssをダウンロードして読み込ませ、<div class="cp-spinner cp-round"></div> といった、Webサイトのアニメーションの下に記述されているHTMLコードを記述して適用させます。

Loaders.css

GitHub

GitHubからloaders.min.cssをダウンロードして読み込ませ、<div class="loader-inner ball-pulse"></div> といった形でアニメーションのクラスを付与して表示させます。

ローディングアニメーションの実装例いろいろ

最後にCodePenで見かけたローディングアニメーションの実装例をいくつか紹介します。シンプルなコードで書かれたものが多いので、参考にしてみてくださいね！

See the Pen
SVG Loading icons by Aurer (@aurer)
on CodePen.

See the Pen
[CSS] Cat loader by Rplus (@Rplus)
on CodePen.

See the Pen
CSS Stairs Loader by Irko Palenius (@ispal)
on CodePen.

See the Pen
Redirecting Loader by Mr Alien (@mr_alien)
on CodePen.

See the Pen
Preloader SVG animation by Jason Miller (@imjasonmiller)
on CodePen.

See the Pen
Animated FlipPreloader – SCSS by Animated Creativity (@animatedcreativity)
on CodePen.

See the Pen
Loading by dissimulate (@dissimulate)
on CodePen.

See the Pen
Battlefield 3 Loading Indicator by Gareth Weaver (@garethdweaver)
on CodePen.

See the Pen
Blurred Gear Loader by Joni Trythall (@jonitrythall)
on CodePen.

See the Pen
CSS Text filling with water by Lucas Bebber (@lbebber)
on CodePen.

See the Pen
Three.js Loader by Lennart Hase (@motorlatitude)
on CodePen.

本当ならこういったローディングアニメーションがなくてもユーザーを待たせないような、読み込みに時間のかからないWebサイトに設計できるといいですよね。「なんとなくかっこいいから」と実装するのではなく、使い勝手を考えて導入するようにしましょう！