読み込みスピナー

ウェブ機能: prefers-reduced-motion メディアクエリ 円錐グラデーション <progress>

読み込みスピナー（またはアクティビティ インジケーター）は、正確な所要時間が不明な場合に、プロセスが進行中であることをユーザーに知らせます。進捗状況グラフとは異なり、スピナーは「不確定」であり、通常はアニメーションを使用してアクティビティを示します。

このガイドでは、次の方法でスピナーを実装します。

  • ネイティブの <progress> 要素をセマンティック基盤として使用する。value 属性を省略すると、ブラウザはこれを不確定な進行状況バーとして扱い、支援技術によって正しく読み上げられるようになります。
  • conic-gradient() でコンポーネントのスタイルを設定して視覚的な「トレイル」を作成し、background-clip: border-area で中央をくり抜いてリングにします。
  • CSS 変換を使用してスピナーを効率的にアニメーション化し、prefers-reduced-motion を尊重して、すべてのユーザーに快適なエクスペリエンスを提供します。

期間がわかっている確定タスクの処理については、進捗状況グラフをご覧ください。

実装

1. マークアップ

ネイティブの <progress> 要素を、セマンティックな信頼できる情報源とビジュアル コンポーネントの両方として使用します。value 属性がない場合、暗黙的に不確定になります。

<progress aria-label="Loading" class="loading-spinner"></progress>

2. スタイル

ネイティブ UI を非表示にする

<progress> 要素をスピナーとしてスタイル設定するには、まず、不確定な進行状況バーのデフォルトのブラウザ スタイルを非表示にします。

/* Hide native bars */
progress.loading-spinner:indeterminate::-webkit-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-webkit-progress-value {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-moz-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::slider-fill {
  display: none;
  background: none;
}

スピナーリングとトレイル

スピナーは conic-gradient を使用して視覚的な軌跡を作成します。

@property --arc-start {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --arc-end {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* Use a custom property to conditionally include the dash animation */
@property --progress-dash-animation {
  syntax: "*";
  inherits: false;
  initial-value: , progress-dash 3s ease-in-out infinite;
}

progress.loading-spinner:indeterminate {
  --_from: calc(90deg + var(--arc-start, 0deg));
  --_to: calc(90deg + var(--arc-end, 158deg));
  --size: 40px;
  --thickness: 2px;
  --spinner-color: #3b82f6;
  --track-color: #e2e5e7;
  --spinner-duration: 1.5s;
  --_used-spinner-duration: var(--spinner-duration);
  --spinner-timing: linear;

  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  appearance: none;

  /* Create the fading trail with dynamic angles */
  background: conic-gradient(
      from var(--_from),
      var(--spinner-color) calc(var(--_to) - var(--_from)),
      transparent 0
    )
    var(--track-color);

  @supports (background-clip: border-area) {
    background-clip: border-area;
    border: var(--thickness) solid transparent;
    background-origin: border-box;
  }

  /* ... fallback for background-clip: border-area ... */

  /* The dash animation is only included if @property is supported */
  animation:
    progress-spin var(--_used-spinner-duration) linear infinite
    var(--progress-dash-animation, );
}

@keyframes progress-spin {
  to {
    rotate: 1turn;
  }
}

@keyframes progress-dash {
  from {
    --arc-start: 0deg;
    --arc-end: 3deg;
  }
  50% {
    --arc-start: 100deg;
    --arc-end: 358deg;
  }
  to {
    --arc-start: 360deg;
    --arc-end: 363deg;
  }
}

モーション設定の尊重

動きに敏感なユーザーは、高速で回転する要素に戸惑うことがあります。常に prefers-reduced-motion メディアクエリを尊重してください。内部 --_used-spinner-duration プロパティを設定して、ユーザーの --spinner-duration 値をオーバーライドします。

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    /* Slow down the animation significantly rather than stopping it entirely,
       so the user still knows that the process is active. */
    --_used-spinner-duration: 6s;
  }
}

代替戦略

@property がサポートされている場合、ダッシュ アニメーションは --progress-dash-animation プロパティの initial-value を介して自動的に含まれます。@property をサポートしていないブラウザでは、プロパティの登録は無視され、アニメーションは単純な回転にフォールバックします。このフォールバックに JavaScript は必要ありません。

background-clip: border-area をまだサポートしていないブラウザの場合は、mask-image にフォールバックして中央をくり抜きます。

/* Fallback: use mask-image to create the ring */
@supports not (background-clip: border-area) {
  --clip-boundary: calc(100% - var(--thickness));
  mask-image: radial-gradient(
    farthest-side,
    transparent var(--clip-boundary),
    black var(--clip-boundary)
  );
  border: 0;
}