動く七色UIローダー アニメSVG 30種 yureloop30【スピナー/コピペで動く・currentColor/七色RGB・商用OK】

【制作について】

本素材のSVG/CSSは「仕様先行スクリプト＋LLM補助」で作成し、

グリッド・線幅・アニメ仕様を統一して人手で検証・調整した完全オリジナルです。

特定の既存ライブラリ・作家の素材は複製していません。

===

Webアプリ・ダッシュボード・管理画面にそのまま貼れる「動くUIローダー」アニメSVG 30種。

すべて1ファイル完結・外部JS不要で、<img>に指定するだけで動きます。

■ 訴求ポイント

⚡ コピペで動く（JavaScript依存ゼロ・アニメはSVG内CSSのみ）

🎨 currentColor 対応 → インライン使用で color 1行に色追従（ダークモード即対応）

🌈 七色に光るRGB版30点を同梱（ゲーミングPC風グローのデモ付き）

📐 プリミティブ設計で16〜24pxでも崩れない／拡大縮小自由

🧩 実在ライブラリ・商標を含まない汎用30種

■ 収録30種

[スピナー8] spinner-ring / spinner-dots3 / dual-ring / bars-equalizer / pulse-circle / orbit / segment-spin / arc-sweep

[プログレス4] progress-bar / circular-progress / step-dots / stripe-indeterminate

[トグル/操作4] toggle-switch / checkbox-pop / radio-pop / heart-like

[フィードバック5] check-success / cross-error / warning-pulse / info-pulse / bell-ring

[スケルトン/読込3] skeleton-card / shimmer-line / typing-dots

[UIモーション6] refresh-rotate / hourglass-flip / upload-arrow / download-arrow / sync-arrows / search-pulse

■ 同梱物（65ファイル）

- svg/ 個別アニメSVG ×30（currentColor）

- svg_rgb/ 七色に光るRGB版 ×30

- gallery.html / rgb_preview.html（プレビュー）

- README.md / 使い方.md / LICENSE.txt

■ 使用例

✅ Web/アプリのローディング・進捗・トグル・通知

✅ 管理画面/ダッシュボードのマイクロインタラクション

✅ 配信オーバーレイ・資料・動画

■ ライセンス

・利用可: 個人/法人の商用、制作物への組込・販売、色/サイズ/速度の改変

・禁止: 素材単体の再配布・転売、競合素材集化、AI学習データへの使用

・クレジット: 任意

■ FAQ

Q. 色を変える方法は？

A. インラインで使い親要素の color を指定するだけ（currentColor対応）。七色版は svg_rgb/ を使うだけ。

Q. JavaScriptは必要？

A. 不要です。SVG単体で動きます。

Q. 商用利用にクレジットは必要？

A. 不要です（任意）。

■ 更新履歴

2026-06-24 v1.0 初版