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を使われてみてはいかがでしょうか?

jQueryプラグインjQueryプラグイン・2014年下半期70選まとめ前のページ

iPhoneアプリのMindNodeで作成したファイルをDropboxに保存するやり方次のページMindNodeのファイルをDropboxに保存

関連記事

  1. Web Information

    ブログ更新の手間を効率化!見ている(閲覧中)ページのタイトルとURLを取得できるブックマークレット

    ここ最近一番よく使っているブックマークレットをご紹介します。ブログ更新…

  2. Web Information

    Gmailでゴミ箱に捨てたメールを元に戻す(復元)やり方

    ちょっと分かりづらかったのでメモしときます。Gmailでゴミ箱に捨てた…

  3. Chromeのブックマークバーの表示・非表示を切り替えるショートカットキー
  4. 新刊チェッカー for Kindle

    Web Information

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

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

  5. Google英語版でWeb検索

    Web Information

    Googleの英語版でWeb検索して検索結果を表示させるやり方

    Google の英語版でWeb検索をする必要があったのでその時のやり方…

  6. YouTube Options

    Web Information

    YouTubeの広告を消して非表示にするChrome拡張機能「YouTube Options」

    YouTubeの広告を消して非表示にしてくれるChrome拡張機能「Y…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP