Loading… – SVG製のローディングアイコン

ローディングアイコンというとアニメーションGIFで作成するイメージがありますが、それだと背景色の問題であったり、アニメーションをスムーズにしようとコマ割を多くするとサイズが大きくなるといった問題が出ます。

そこで使ってみたいのがSVGです。SVGであればベクターなのでサイズを変更しても奇麗なままですし、色を変更したりすることもできます。そんな仕組みを提供してくれるのがLoading...です。

Loading...の使い方

使い方としては画像を扱うのと変わりません。

<img src="loading-spinning-bubbles.svg" width="64" height="64" />

これでローディングアイコンとして使えます。

カスタムしたい場合はSVGファイルを修正します。

<svg class="icon-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="blue">

例えばこれで線の色を変更できます。以下はデモ動画です。アニメーションGIFと違ってアニメーションが細かくて奇麗ですね。

Loading...は8種類のローディングデザインを提供しています。気になるデザインをぜひチェックしてみてください。

Loading...はSVG製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。