数字カウントアップ × 背景フェードのローディングアニメーション

0%から100%まで数字がカウントアップし、左から右へ現れた背景とともに消えていくローディングアニメーションの実装方法について解説しています。

JSのライブラリなどを使わないシンプルな構成で、CSS変数とclip-path、mix-blend-modeを組み合わせて実現しています。

実装例

早速ですが下記が実装例です。

ページ読み込み後に数字がカウントアップし、背景が左から塗りつぶされてフェードアウトしていきます。もう一度実行したい場合は、右下にある「Return」ボタンをクリックしてください。

シンプルながらも、擬似的な読み込みの進捗が視覚的にわかり、ページの読み込みが完了したことが伝わりやすいアニメーションだと思います。ライブラリ不要で軽量に実装できるアニメーションです。

解説

HTML/CSSとJavaScriptの処理を順を追って解説していきます。

HTMLの構造

HTMLは次のとおりです。

1
<div class="c-loading" data-loading="container">
2
  <div class="c-loading__inner">
3
    <div class="c-loading__bg" data-loading="bg"></div>
4
    <span class="c-loading__text" data-loading="text">
5
      0%
6
    </span>
7
  </div>
8
</div>

c-loadingがローディング画面全体、c-loading__bgが塗りつぶし用の背景層、c-loading__textがパーセンテージ表示です。動かしたい要素にはdata-loading属性を付与し、JavaScriptから取得できるようにしています。

CSSのポイント

CSSは次のとおりです。

1
.c-loading {
2
  position: fixed;
3
  inset: 0;
4
  height: 100%;
5
  width: 100%;
6
  opacity: 1;
7
  z-index: 10;
8
  pointer-events: auto;
9
}
10

11
.c-loading__inner {
12
  width: 100%;
13
  height: 100%;
14
  background-color: #fff;
15
}
16

17
.c-loading__bg {
18
  --_clip-right: 100%;
19
  width: 100%;
20
  height: 100%;
21
  background-color: #1e3a5f;
22
  clip-path: inset(0 var(--_clip-right) 0 0);
23
  transition-timing-function: ease-in;
24
}
25

26
.c-loading__text {
27
  position: absolute;
28
  top: 50%;
29
  left: 50%;
30
  transform: translate(-50%, -50%);
31
  color: #fff;
32
  mix-blend-mode: difference;
33
  text-align: center;
34
  font-weight: 500;
35
  font-size: 20px;
36
  font-family: "Montserrat", sans-serif;
37
  letter-spacing: 0.05em;
38
}
39

40
.c-loading--complete {
41
  opacity: 0;
42
  visibility: hidden;
43
  transition: all 0.6s ease;
44
  transition-delay: 0.6s;
45
  pointer-events: none;
46
}

c-loading__bgの初期状態は--_clip-right: 100%（clip-path: inset(0 100% 0 0)）で、画面全体が塗りつぶされていない状態です。JavaScriptから--_clip-rightを更新することで、右側の切り取り幅を減らし、左から右へ塗りつぶし幅を制御しています。

c-loading__textにはmix-blend-mode: differenceを指定しています。これにより背景色が変わっても数字が常に見やすい色で表示されます。

100%に到達するとc-loading--completeクラスが付与され、ローディング画面全体がフェードアウトして操作を受け付けなくなります。

JavaScriptの処理を言語化

JavaScriptのアニメーションに関するコードは以下のとおりです。

1
const setProgress = () => {
2
  const container = document.querySelector("[data-loading='container']");
3

4
  if (!container) return;
5

6
  const bg = container.querySelector("[data-loading='bg']");
7
  const text = container.querySelector("[data-loading='text']");
8

9
  if (!bg || !text) return;
10

11
  let current = 0;
12

13
  const updateProgress = () => {
14
    current += (100 - current) * 0.075;
15

16
    if (current > 99.9) {
17
      current = 100;
18
    }
19

20
    bg.style.setProperty("--_clip-right", `${100 - current}%`);
21
    text.textContent = Math.floor(current) + "%";
22

23
    if (current < 100) {
24
      requestAnimationFrame(updateProgress);
25
    } else {
26
      container.classList.add("c-loading--complete");
27
    }
28
  };
29

30
  requestAnimationFrame(updateProgress);
31
};
32

33
setProgress();

requestAnimationFrameでフレームごとに進捗を更新しています。current += (100 - current) * 0.075の計算により、最初は速く、終盤はゆっくりと増えるイージングがかかります。

フレームごとに更新されるcurrentの値を、以下の2つに反映しています。

• 背景の塗りつぶし幅：--_clip-right（100 - current%）を更新
• 表示する数字：Math.floor(current)で表示する数字を整数にし、textContentで更新

1つの値を基準にすることで、数字と背景の塗りつぶし幅が同期しています。最終的にcurrentが100%に到達したら.c-loading--completeクラスを付与してローディング画面を非表示にします。

表現アレンジのアイデア

今回の構成はシンプルなため、いくつかの値や要素を変えるだけで表現の幅を広げられます。

• 背景が出現する方向を変える：clip-pathのinsetで切り取る辺を変えれば、右から・上から・下からなど任意の方向へ背景を出現させられます。CSS変数で制御する辺を切り替えるだけで、同じJavaScriptの進捗ロジックを流用できます。
• イージングの係数を調整する：JavaScriptのcurrent += (100 - current) * 0.075にある0.075は、1フレームごとに残り進捗の何%分を進めるかを決める係数です。値を大きくすると素早く100%に到達し、小さくするとゆったりした印象になります。サイトのトーンに合わせて調整できます。
• カウントアップをプログレスバーに変更する：中央の数字の代わりに、横棒のバーを置き、scaleXを進捗率に合わせて伸ばす形にもできます。数字とバーを併用すれば、視覚と数値の両方で進捗を伝えられます。

いずれも今回の仕組みをベースに実装できるため、まずはデモの形を再現し、必要に応じて調整していくのが手軽かと思います。

さらにユーザー体験を高めるには

今回のデモでは省略していますが、次のような処理を加えるとユーザー体験がさらに良くなるでしょう。

• 画像のloadイベントなどを監視し、実際の読み込み状況と進捗を同期させる
• localStorageを使用し、初回訪問時のみローディングを表示する

前者は、デモのように時間ベースで進捗を進めるより、ページ内のリソースが実際に読み込まれたタイミングと連動するため、体感のズレを抑えられます。後者は、2回目以降の訪問でローディングをスキップできるため、リピーターにとっての待ち時間を減らせます。