本文へスキップ
JA

21 個のアイコン · interaction="loop"

ループするアニメーションアイコン

画面に表示されている間ずっと再生し続けるアイコンです。読み込み中、警告が出ている、ターミナルが入力を待っているなど、しばらく続く状態の表示に向いています。モーション軽減が有効な場合は最初のフレームで止まり、通常のアイコンとして読み取れます。

「ループ」のアイコン一覧

動作

常に再生し続けます。モーション軽減が有効な場合は静止した最初のフレームのままです。

モーション軽減が有効な場合、アイコンは自動再生されず、静止した最初のフレームのままになります。これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。

使いどころ

  • ローディングスピナーや進行状況のインジケーター
  • 警告やエラーが続いている状態
  • ライブ配信中・録画中のインジケーター
  • ヒーローセクションの下へスクロールの合図
  • 新着通知に注意を向ける目印

カテゴリ別

React で使う

ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも interaction prop を渡せば同じ動きにできます。

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings の本来のインタラクションは 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

ループするアイコンは自動再生され、画面外にスクロールされている間は一時停止します。speed で遅くしたり、loop={false} で 1 回だけ再生したり、autoplay={false} で止めたままにしたりできます：

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // 半分の速度
<UseAnimations animation={infinity} loop={false} />     // 1 回再生して停止
<UseAnimations animation={infinity} autoplay={false} /> // 静止した最初のフレーム

すべての props はドキュメントにまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は Lottie アイコンを参照してください。

よくある質問

「ループ」のインタラクションを使うアイコンは？

21 個あります。Alert circle、Alert octagon、Alert triangle、Error、Notification V3、Notification V4、More Horizontal、More Vertical、Checkmark、Help、Airplay、Terminal、Infinity、Loading circular、Loading V2 ほか 6 個です。ループするアイコンは、ローディングスピナー、継続中のアラート、鳴っているベル、下へスクロールのヒントによく使われます。

ユーザーがモーション軽減を設定している場合はどうなりますか？

モーション軽減が有効な場合、アイコンは自動再生されず、静止した最初のフレームのままになります。React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。

アイコンのインタラクションを変えるには？

どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="loop" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。