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. さくらレンタルサーバーからエックスサーバーへの移転手順

    Web Information

    さくらレンタルサーバーからエックスサーバーにWordPressを移転する手順

    自分が管理運営している、あるWordPressサイトのサーバー移転が無…

  2. Web Information

    FacebookのLike Boxを設置して表示させるまでのやり方

    FacebookのLike Boxの設置から表示させるまでのやり方をメ…

  3. 新刊チェッカー for Kindle

    Web Information

    Kindleの最新情報(セールや新刊)が分かるiPhoneアプリ「新刊チェッカー for Kindl…

    Kindle(キンドル)のセールや新刊などの最新情報をiPhoneから…

  4. Web Information

    Nexus7で英和辞書を簡単に呼び出して翻訳できるようにする環境構築

    Nexus7を使っていてちょっと不便なのが英文を読む時。iPhoneみ…

  5. Bootstrap Vertical Carousel
  6. iPad Airのテンプレート素材(PSD)

    Web Information

    デザインやモックアップに役立ちそうなiPad Airのテンプレート素材(PSD)

    iPad Airのテンプレート素材(PSD)がとてもよかったのでメモが…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP