CSS のみの Tailwind スピナー、ドット、リング、バーのアニメーションを備えた CSS 読み込みインジケーター。色とサイズのバリエーション、JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
コンポーネントを読み込むと、コンテンツの取得または処理中に視覚的なインジケーターが表示されるため、ユーザーに情報が提供され、遅延が認識されるのを防ぎます。セマンティック HTML とスムーズな CSS アニメーションで構築されており、ロード スピナーはアクティブなバックグラウンド操作を伝達します。 Frutjam 読み込みシステムは、複数のスタイル、色、サイズをサポートしており、データ テーブル、ファイルのアップロード、フォームの送信、および非同期操作に最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| loading | ベース | スピニング リング インジケーター。デフォルトでテキストの色を継承します。 |
| loading-dots | スタイル | 3 つのパルス状のドット |
| loading-bars | スタイル | アニメーション化された 3 本の垂直バー |
| loading-xs | サイズ | 特小（1レム） |
| loading-sm | サイズ | 小（1.25レム） |
| loading-md | サイズ | 中 (1.5rem、デフォルト) |
| loading-lg | サイズ | 大(2レム) |
| loading-xl | サイズ | 特大（2.5レム） |
| loading-base | 色 | 落ち着いたベース表面色 |
| loading-current | 色 | 現在のテキストの色を明示的に継承します |
| loading-primary | 色 | 主要なテーマカラー |
| loading-secondary | 色 | 二次テーマカラー |
| loading-accent | 色 | アクセントのテーマカラー |
| loading-neutral | 色 | ニュートラルなテーマカラー |
| loading-info | 色 | 情報セマンティックカラー |
| loading-success | 色 | 成功のセマンティックカラー |
| loading-warning | 色 | 警告セマンティックカラー |
| loading-error | 色 | エラー セマンティック カラー |
基本的な使い方
<span class="loading"></span> |
<span className="loading"></span> |
<span class="loading"></span> |
スタイルの読み込み
html
1 2 3 | <span class="loading"></span> <span class="loading loading-dots"></span> <span class="loading loading-bars"></span> |
積載サイズ
html
1 2 3 4 5 | <span class="loading loading-xs"></span> <span class="loading loading-sm"></span> <span class="loading loading-md"></span> <span class="loading loading-lg"></span> <span class="loading loading-xl"></span> |
カラーの読み込み
html
1 2 3 4 5 6 7 8 9 | <span class="loading loading-base"></span> <span class="loading loading-primary"></span> <span class="loading loading-secondary"></span> <span class="loading loading-accent"></span> <span class="loading loading-info"></span> <span class="loading loading-success"></span> <span class="loading loading-warning"></span> <span class="loading loading-error"></span> <span class="loading loading-neutral"></span> |
現在の色をロードしています
Inherits primary text color
Inherits error text color
html
1 2 3 4 5 6 7 8 | <p class="text-primary flex items-center gap-2"> <span class="loading loading-sm"></span> Inherits primary text color </p> <p class="text-error flex items-center gap-2"> <span class="loading loading-sm"></span> Inherits error text color </p> |
ボタンで読み込み中
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <button class="btn gap-2"> <span class="loading loading-sm"></span> Loading </button> <button class="btn btn-primary gap-2"> <span class="loading loading-sm loading-current"></span> Processing </button> <button class="btn btn-error gap-2"> <span class="loading loading-sm loading-current"></span> Deleting </button> |
ロード状態
Loading Data
Fetching information...
html
1 2 3 4 5 6 7 8 9 | <div class="card card-outline w-96"> <div class="card-content"> <h3 class="card-title">Loading Data</h3> <div class="flex items-center gap-2"> <span class="loading loading-md"></span> <span>Fetching information...</span> </div> </div> </div> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な 読み込み中 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。