ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ローディングアイコンというとアニメーション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製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

jxnblk/loading

Loading...

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2