ZETAP SOZAI ／ yureloop30
動く UIローダー アニメSVG 30種

yureloop30

スピナー・プログレス・トグル・フィードバックまで、UIで使う動くローダー30種。

currentColor 対応で親要素の color に追従。七色RGB版30点も同梱。`<img>` で貼るだけで動く。

¥100¥980発売記念 約90% OFF
BOOTHで購入する →

特長

貼るだけ
CSSアニメをSVGに内蔵。<img>で動く（外部JS/CSS不要）
色を自由に
currentColor対応。インライン配置で親のcolorに追従／七色RGB版も同梱
軽量SVG
ビューポート100×100の最適化パス。Retina可・拡大劣化なし
商用利用OK
制作物への商用利用可・改変可（素材そのものの再配布/AI学習は不可）

全30種を動かして見る クリックで色変更

色
Arc Sweeparc-sweep
Bars Equalizerbars-equalizer
Bell Ringbell-ring
Check Successcheck-success
Checkbox Popcheckbox-pop
Circular Progresscircular-progress
Cross Errorcross-error
Download Arrowdownload-arrow
Dual Ringdual-ring
Heart Likeheart-like
Hourglass Fliphourglass-flip
Info Pulseinfo-pulse
Orbitorbit
Progress Barprogress-bar
Pulse Circlepulse-circle
Radio Popradio-pop
Refresh Rotaterefresh-rotate
Search Pulsesearch-pulse
Segment Spinsegment-spin
Shimmer Lineshimmer-line
Skeleton Cardskeleton-card
Spinner Dots3spinner-dots3
Spinner Ringspinner-ring
Step Dotsstep-dots
Stripe Indeterminatestripe-indeterminate
Sync Arrowssync-arrows
Toggle Switchtoggle-switch
Typing Dotstyping-dots
Upload Arrowupload-arrow
Warning Pulsewarning-pulse

紹介画像

yureloop30 promo yureloop30 promo yureloop30 promo yureloop30 promo yureloop30 promo yureloop30 promo yureloop30 promo yureloop30 promo

使い方

<img src="svg/spinner-ring.svg" width="48">            <!-- そのまま動く -->
<img src="assets/yureloop30/svg_rgb/spinner-ring.svg" width="48">        <!-- 七色RGB版 -->
¥100¥980発売記念 約90% OFF
BOOTHで購入する →