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








【制作について】 本素材の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 初版







