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. マウスオーバーでEXIFをチェックできる「EXIF Viewer」
  2. Videolicious

    Web Information

    iPhoneで動画を複数つなぎ合わせて簡単に作品を制作できるアプリ「Videolicious」

    iPhoneで複数の動画を簡単につなぎ合わせて作品を制作することができ…

  3. Gmailの送信メール取り消し設定

    Web Information

    Gmailで送信メールを取り消し(キャンセル)する設定方法

    先日、GmailのWeb版に送信メールの取り消し機能が採用されたのでさ…

  4. Web Information

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

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

  5. Web Information

    iPhoneのアラームを無音でバイブや光のみで知らせてくれる便利アプリ「サイレントタイマー」

    静かな場所でiPhoneのアラームをかけたい時に便利なアプリ「サイレン…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP