CSSだけでローディングアニメーションを作る＃02

JavaScriptを使わず、CSSだけで5つのドットが左から順番にジャンプするローディングアニメーションを作る方法。はずみや伸び縮みはつけず、位置を途中で補間せずに切り替えて、機械的な「ピピピ」という動きにする。色・高さ・速さは数字の変更だけで調整できる。

動きは1周期1.2秒で、次の順番で繰り返す。

ドットは下端（地面）に並んでいる
1つのドットが「中間 → 頂点 → 中間 → 地面」と、0.05秒ごとに切り替わる
1回のジャンプは0.2秒。前のドットが着地する頃に、次のドットが跳ぶ
右端が跳び終わると、少し静止して左端から繰り返す

位置を一瞬で切り替えているのは、animation-timing-function の step-end による。これで、途中の動きが補間されず、デジタルな動きになる。ドットごとに animation-delay をずらすだけで、順番のジャンプになる。

HTML（表示したい場所に置く。span は必ず5つ）

<div class="hop" role="status" aria-label="読み込み中">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* 入れ物（ドット5つの置き場所） */
.hop {
  display: flex;
  align-items: flex-end;           /* ドットの下端をそろえる（ここが地面） */
  gap: 10px;                       /* ドットの間隔 */
  padding-top: 10px;               /* ジャンプの高さと同じ値にする（頭が切れない） */
}

/* ドット（共通） */
.hop span {
  display: block;
  width: 10px;                     /* ドットの大きさ（直径） */
  height: 10px;
  border-radius: 50%;
  background: #555555;             /* ドットの色 */
  animation: hop-digital 1.2s step-end infinite;   /* 1周期。step-end = 途中を補間せず一瞬で切り替える */
}

/* 左から順番にずらす（周期 ÷ 6 = .2秒ずつ） */
.hop span:nth-child(2) { animation-delay: .2s; }
.hop span:nth-child(3) { animation-delay: .4s; }
.hop span:nth-child(4) { animation-delay: .6s; }
.hop span:nth-child(5) { animation-delay: .8s; }

/* ドットの動き（位置だけ。伸び縮み・はずみなし） */
@keyframes hop-digital {
  0%      { transform: translateY(0); }      /* 地面で静止 */
  4.17%   { transform: translateY(-5px); }   /* 中間（上がる） */
  8.33%   { transform: translateY(-10px); }  /* 頂点 */
  12.5%   { transform: translateY(-5px); }   /* 中間（下りる） */
  16.67%  { transform: translateY(0); }      /* 地面に戻って静止 */
  100%    { transform: translateY(0); }
}

/* OSで「視差効果を減らす」設定のときは止める */
@media (prefers-reduced-motion: reduce) {
  .hop span { animation: none; }
}

調整するときの変更箇所は次のとおり。

変えたいもの	変更する場所
ドットの色	`.hop span` の `background`
ドットの大きさ	`.hop span` の `width` / `height`（同じ値に）
ジャンプの高さ	`@keyframes` の頂点（`-10px`）と `.hop` の `padding-top`（同じ値に）。中間は頂点の半分
全体の速さ	`animation` の `1.2s` と、`animation-delay` の4つ（周期 ÷ 6 の1〜4倍）
ジャンプ1回の速さ	`@keyframes` の `%` の刻み（今は4.17% = 0.05秒ずつ）
次に跳ぶまでの間	`animation-delay` の幅。ジャンプ1回（0.2秒）以上にすると、前が着地してから次が跳ぶ

周期とずらし幅は、セットで変える必要がある。周期を短くするなら、ずらし幅も同じ割合で短くする。1.2秒なら .2 / .4 / .6 / .8、0.9秒なら .15 / .3 / .45 / .6 になる。

実際のサイトでは、ページの読み込みが終わるまで表示して、完了したらフェードアウトさせる形で使える。表示環境によって動きの見え方が異なる場合があるため、本番に反映する前に確認を推奨。

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

MEMORANDUM

LOOKED IT UP. WROTE IT DOWN. JUST IN CASE.

NOTICES