Webやスマホアプリに最適なSVGアニメーションのスピナー! 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners

商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。

SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。

SVGアニメーションの超軽量スピナー -SVG Spinners

SVG Spinners -GitHub

SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。

スピナーは44種類あり、その中からいくつかコピペしてみました。
まずはよく見かけるドットが回転するスピナー。

スピナー

6-dots-rotate.svg

スピナーを利用するには、svgのコード(下記)をコピペするか、画像のようにimgタグのsrcにファイル名を記述するだけです。

バーがフェードしながら回転するのもよく見かけますね。

スピナー

bars-rotate-fade.svg

サイズは、200x200にして表示しています。

ほかにもよく見かけるスピナーや変わったスピナーが44種類あります。

スピナー

12-dots-scale-rotate.svg

12-dots-scale-rotate.svg

カラーの変更はCSSで簡単にできます。

スピナー

180-ring-with-bg.svg

スピナー

3-dots-bounce.svg

スピナー

3-dots-scale.svg

スピナー

blocks-shuffle-3.svg

スピナー

bouncing-ball.svg

スピナー

clock.svg

スピナー

gooey-balls-2.svg

sponsors

top of page

©2022 coliss