SVG Loaders

Web Information

SVGだけを使った可愛いローディングアイコン集・SVG Loaders

SVG LoadersはCSSやJavaScriptを必要とせずSVGだけを使ったローディングアイコン集です。どれも可愛らしいデザインが特徴的で、コンパクトなアニメーションが非常にいい感じです。種類もいろいろあるので今後のためにも覚えておきたいところです。

[ads_center]

SVG Loadersの使い方

SVG Loaders

SVG Loaders

SVG Loadersを使う場合は、以下のようにimgタグを使って表示させます。

<img src="svg-loaders/puff.svg" />

使い方がとっても簡単なところがいいですね。アイコンカラーを変更したい時はfillの値を好きな色に設定すればOKです。

<svg fill="#fff" ・・・中略・・・>

CSSやJSがいらないのでシンプルにローディングアニメーションを記述することができますね。

自分のサイトデザインに合ったカラーを指定することができるので、かなり使い勝手がよさそうです。

ローディングアニメーションをどのように表示させるか迷っている方は、この機会にSVG Loadersを使われてみてはいかがでしょうか?

関連記事

  1. Responsive Full Width Tabs
  2. URLをハイライト表示させるショートカットキー

    Web Information

    ChromeでURL欄にカーソルを合わせる(ハイライト表示)ショートカットキー

    最近覚えたChromeの役立つショートカットキーをご紹介します。URL…

  3. Web Information

    タイポグラフィを向上させるjQueryプラグイン15

    テキストやタイポグラフィに関する機能を向上させてくれる15のjQuer…

  4. coolHue

    Web Information

    クールなグラデーションがたくさん用意されたWebサイト「coolHue」

    coolHueはクールで素敵なグラデーションがたくさん用意されたWeb…

  5. Chromeの複数タブをまとめて閉じるショートカットキー

    Web Information

    Google Chromeで指定した複数タブをまとめて閉じるショートカットキー

    ちょっと便利だったのでメモがてらご紹介します。Google Chrom…

  6. New Tab Redirect

    Web Information

    Chromeの最初の画面(新規タブ)をアプリ一覧にする設定方法

    Chromeで新規タブを開いた時などに表示される最初の画面をアプリ一覧…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP