ローディングスピナーとは

くるくると回り続ける輪の形のアニメーションで、処理が進行中であることを伝える。

概要

円形の輪がくるくると回り続けるアニメーションで、「今、処理が進行中です」と伝える部品です。どのくらい時間がかかるか分からない処理（通信の待ち時間など）に向いていて、CSS のアニメーションだけで実装できます。

別名

表記ゆれ：スピナー、くるくる、ローダー、ローディングアニメーション、loading spinner

「くるくる」は開発現場での俗称で、正式な文書には使いませんが会話ではよく出てきます。

AI への伝え方

「読み込み中はスピナーを出して」で通じます。色やサイズのほか、画面全体を覆って表示するのか、ボタンの中など一部だけに小さく表示するのかを伝えると仕様がぶれません。

似たパーツとの違い

「スケルトンスクリーン」は、読み込み中のコンテンツの形をグレーのブロックで先に見せる方法で、スピナーより完成後の見た目が想像しやすいという利点があります。「プログレスバー」は進捗の割合が分かっている処理向けで、スピナーはどのくらいで終わるか分からない処理に向いている違いがあります。

デモ

コード

HTML

<div class="loading-spinner-demo">
  <span class="loading-spinner-demo__spinner" role="status" aria-label="読み込み中"></span>
</div>

CSS

.loading-spinner-demo {
  display: flex;
  justify-content: center;
}

.loading-spinner-demo__spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #e6e6e6;
  border-top-color: #0017c1;
  border-radius: 50%;
  animation: loading-spinner-demo-spin 0.8s linear infinite;
}

@keyframes loading-spinner-demo-spin {
  to {
    transform: rotate(360deg);
  }
}