本文へスキップ
JA

5 個のアイコン · MIT ライセンス

ローディングのアニメーションアイコン

処理が続いている間ずっとループするスピナーやローダーです。リクエスト中の送信ボタンの中、読み込み中のコンテンツの代わり、全画面のスプラッシュなどに置けます。ユーザーがモーション軽減を設定している場合は静止します。

5 個すべてが常にループ再生するアイコンです。どのアイコンも React コンポーネント、shadcn/ui コンポーネント、Lottie JSON アニメーション として提供され（うち 2 個は静的 SVG も用意）、MIT ライセンスのもと商用利用も無料です。

ローディングのアイコン一覧

使いどころ

  • リクエストの完了を待つ送信ボタン
  • リストやグラフを読み込み中のプレースホルダー
  • 無限スクロールや「もっと見る」のインジケーター
  • 全画面のスプラッシュやページ遷移
  • ファイルのアップロードや処理の進行状況

インタラクション別

アプリに追加する

React では react-useanimations をインストールしてアイコンをインポートするだけで、「ループ」のインタラクションで動きます。このカテゴリのアイコンはどれも使い方が同じなので、loading を各アイコンのページに載っている名前に置き換えてください。

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

shadcn/ui なら、CLI ですぐに使えるコンポーネントを追加できます：

npx shadcn@latest add https://useanimations.com/r/loading.json
import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

React を使わない場合も、各アイコンは /icons/<id>.json にある Lottie JSON ファイルとして使えます。Web、iOS、Android、Flutter 向けのプレーヤーは Lottie アイコンを参照してください。

よくある質問

ローディングのアニメーションアイコンにはどんなアイコンがありますか？

5 個あります。Infinity、Loading circular、Loading V2、Loading V3、Loading V4です。どれも MIT ライセンスのもと個人・商用プロジェクトで無料で使え、クレジット表記も必要ありません。

ローディングのアニメーションアイコンを React で使うには？

react-useanimations をインストールし、import loading from 'react-useanimations/lib/loading' を追加して <UseAnimations animation={loading} size={32} /> をレンダリングします。アイコンは「ループ」のインタラクションで動き、テキストの色に合わせて表示されます。shadcn/ui を使う場合は、代わりに npx shadcn@latest add https://useanimations.com/r/loading.json を実行してください。

ローディングのアニメーションアイコンは React なしでも使えますか？

はい。各アイコンは https://useanimations.com/icons/<id>.json（例：https://useanimations.com/icons/loading.json）にある Lottie JSON ファイルで、lottie-web、lottie-ios、lottie-android、Flutter の lottie パッケージで再生できます。静的 SVG は各アイコンのページ（英語）からダウンロードできます。エクスプレッションを使うアイコンはないので、lottie-web のライトビルドで十分です。